/* ════════════════════════════════════════════════════
   components.css — Trainer DB
   Inhaltsverzeichnis:
   1. Buttons (.btn, .btn--, .icon-btn)
   2. Forms (.form-group, .form-control, .form-label)
   3. Cards (.card)
   4. Tags & Badges (.tag, .tag-list)
   5. Alerts (.alert, Varianten)
   6. Empty-State (.empty-state)
   7. Like-Button (.like-btn)
   8. Toast (.toast)
   9. Share-Panel (.share-panel, .share-wrap)
   10. Confirm-Dialog (.confirm-dialog)
   11. Rating / Pfoten (.rating-*, .paw-gradient-defs)
   12. Passwort-Stärke (.pw-strength)
   13. Loading-States (.is-loading)
   14. Scroll-to-Top (.scroll-top-btn)
   15. Klickbare Tabellenzeilen (tr[data-href])
   REGEL: Nur Komponenten die auf mehr als einer Seite vorkommen.
   ════════════════════════════════════════════════════ */

/* 1. Focus-Styles (global + komponentenbezogen) ---------- */
:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
  border-radius: 4px;
}

.btn:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(242,184,75,0.2);
}

.form-control:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
  box-shadow: var(--focus-ring-shadow);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}

.like-btn:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}

/* 2. Buttons -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  line-height: 1.4;
  min-height: 44px;
  letter-spacing: 0.01em;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.btn:active { transform: translateY(0); }

.btn--primary {
  background: linear-gradient(to bottom, #5b7a38, var(--primary));
  color: var(--on-primary);
}
.btn--primary:hover {
  background: linear-gradient(to bottom, #4d6630, var(--primary-deep));
  color: var(--on-primary);
}

.btn--outline {
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}
.btn--outline:hover {
  background: var(--primary);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--sm {
  padding: 0.4rem 0.875rem;
}

.btn--danger {
  background: var(--color-error);
  color: var(--white);
}

.btn--danger:hover {
  background: var(--danger-deep);
  color: var(--white);
}

.btn--xs {
  padding: 0.15rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1;
  min-height: 0;
  gap: 0.25rem;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* Icon-Buttons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--soft-text);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  flex-shrink: 0;
}

.icon-btn svg {
  display: block;
  pointer-events: none;
}

.icon-btn:hover {
  background: var(--light-bg);
  border-color: var(--border-soft);
  color: var(--primary);
}

.icon-btn--danger:hover {
  background: rgba(192, 57, 43, .06);
  border-color: rgba(192, 57, 43, .25);
  color: var(--color-error);
}

.icon-btn--success:hover {
  background: rgba(30, 126, 74, .06);
  border-color: rgba(30, 126, 74, .25);
  color: var(--color-success);
}

/* 3. Forms ---------------------------------------------- */
.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--primary);
}

.form-control {
  width: 100%;
  padding: 0.6rem 0.875rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--color-text);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:hover:not(:focus):not(:disabled) {
  border-color: rgba(55, 74, 32, 0.30);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--focus-ring-shadow);
}

.form-control::placeholder {
  color: var(--secondary);
  opacity: 0.75;
}

.form-control--error {
  border-color: var(--color-error);
  background: var(--bg-error-soft);
}

.form-control--valid {
  border-color: var(--color-success);
  background: var(--bg-success-soft);
}

.form-control:disabled,
.form-control[disabled] {
  background: var(--light-bg);
  color: var(--soft-text);
  border-color: var(--border-soft);
  cursor: not-allowed;
  opacity: 0.7;
}

.form-control[readonly] {
  background: var(--light-bg);
  color: var(--soft-text);
  cursor: default;
}

textarea.form-control {
  resize: vertical;
  min-height: 6rem;
  font-family: var(--font-family);
  line-height: var(--line-height);
}

/* 4. Generische Karte ------------------------------------ */
.card, .ex-card {
  background: linear-gradient(160deg, rgba(77, 102, 48, 0.04) 0%, var(--white) 65%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

@media (hover: hover) {
  .card:hover, .ex-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--space-sm);
}

.card__meta {
  font-size: var(--font-size-sm);
  color: var(--soft-text);
  margin-bottom: var(--space-sm);
}

/* 5. Tags & Badges --------------------------------------- */
.tag {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: var(--font-size-tag);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  background: var(--light-bg);
  color: var(--primary);
  border: 1px solid var(--border-soft);
}

.tag--label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tag--highlight {
  background: var(--bg-info-soft);
  color: var(--color-info-text);
  border-color: var(--border-info);
}

.tag--status-neu {
  background: var(--bg-warning-soft);
  color: var(--color-warning-text);
  border-color: var(--border-warning);
}

.tag--status-kuratiert {
  background: var(--bg-success-soft);
  color: var(--color-success-text);
  border-color: var(--border-success);
}

.ex-curator-check {
  display: inline-flex;
  align-items: center;
  color: var(--color-success);
  flex-shrink: 0;
}

.tag--private {
  background: rgba(77, 102, 48, 0.07);
  color: var(--primary-deep);
  border-color: rgba(77, 102, 48, 0.25);
}

.tag--submitted {
  background: rgba(160, 110, 20, 0.08);
  color: #7a5200;
  border-color: rgba(160, 110, 20, 0.28);
}

.tag--goal {
  display: inline-block;
  font-size: var(--font-size-tag);
  font-weight: 500;
  white-space: normal;
  word-break: normal;
  line-height: 1.3;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--light-bg);
  color: var(--primary);
  border: 1px solid var(--border-soft);
  max-width: 200px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* 6. Alerts --------------------------------------------- */
@keyframes alert-slide-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  border-left: 4px solid;
  font-size: var(--font-size-sm);
}

.alert--success {
  background: var(--bg-success-soft);
  border-color: var(--color-success);
  color: var(--color-success-text);
  animation: alert-slide-in var(--transition-slow) both;
}

.alert--error {
  background: var(--bg-error-soft);
  border-color: var(--color-error);
  color: var(--color-error-text);
  animation: alert-slide-in var(--transition-slow) both;
}

.alert--warning {
  background: var(--bg-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-warning-text);
  animation: alert-slide-in var(--transition-slow) both;
}

.alert--info {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border-color: var(--primary);
  color: var(--color-text);
  animation: alert-slide-in var(--transition-slow) both;
}

/* 7. Empty-State ----------------------------------------- */
.empty-state {
  border: 1.5px dashed var(--secondary);
  background: var(--light-bg);
  color: var(--soft-text);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-2xl) var(--space-xl);
  border-radius: var(--radius-md);
}

.empty-state__icon {
  color: var(--secondary);
  opacity: 0.7;
}

.empty-state__text {
  color: var(--soft-text);
  font-size: 1rem;
  margin: 0;
}

.empty-state__hint {
  font-size: var(--font-size-sm);
  color: var(--soft-text);
  margin: 0;
}

/* 8. Like-Button ---------------------------------------- */
.like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border-soft);
  background: var(--white);
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--soft-text);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  min-height: 36px;
  white-space: nowrap;
}

@media (hover: hover) {
  .like-btn:hover {
    color: var(--color-error);
    border-color: rgba(192, 57, 43, 0.4);
    background: rgba(192, 57, 43, 0.04);
  }
}

.like-btn.is-liked,
.icon-btn.is-liked {
  color: var(--color-error);
}

.like-btn.is-liked {
  border-color: rgba(192, 57, 43, 0.35);
  background: rgba(192, 57, 43, 0.06);
}

@keyframes like-pop {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.55); }
  55%  { transform: scale(0.82); }
  78%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.like-btn__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: fill var(--transition-fast), stroke var(--transition-fast);
}

.like-btn__icon.is-popping {
  animation: like-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.like-btn--compact {
  padding: 0;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  border-color: transparent;
  background: transparent;
}

@media (hover: hover) {
  .like-btn--compact:hover {
    border-color: rgba(192, 57, 43, 0.3);
    background: rgba(192, 57, 43, 0.04);
  }
}

.like-btn--compact.is-liked {
  border-color: transparent;
  background: transparent;
}

.like-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* 9. Toast ---------------------------------------------- */
#toast-container {
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: .4rem;
  align-items: center;
  pointer-events: none;
}

.toast {
  background: var(--toast-bg);
  color: #fff;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition);
  white-space: nowrap;
}
.toast.toast--visible {
  opacity: 1;
  transform: translateY(0);
}
.toast.toast--error   { background: var(--color-error); }
.toast.toast--success { background: var(--primary); }

/* 10. Share-Panel --------------------------------------- */
.share-wrap {
  position: relative;
}

.share-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 300px;
  max-width: 360px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 200;
  padding: var(--space-md);
}

.share-panel__input {
  margin-bottom: var(--space-xs);
}

.share-panel__submit {
  width: 100%;
  margin-top: var(--space-sm);
}

.share-panel__error {
  color: var(--color-error);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

.share-panel__new-link {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--primary);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  padding: 0;
}

.share-url-box {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.share-url-input {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  color: var(--soft-text);
  background: var(--light-bg);
  cursor: text;
}

.share-panel__notice {
  background: var(--light-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  margin: 0 0 var(--space-sm);
  line-height: 1.4;
}

.share-section-label {
  margin: 0 0 var(--space-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.share-new-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.share-new-form .share-panel__submit {
  margin-top: var(--space-xs);
}

.share-recipient-section {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-soft);
}

.share-expiry {
  margin: var(--space-xs) 0 0;
}

.share-url-box .js-share-copy {
  color: var(--primary);
}

.share-panel__loading {
  padding: var(--space-sm) 0;
  text-align: center;
}

.share-qr {
  display: flex;
  justify-content: center;
  margin: 0 auto var(--space-md);
}

.share-qr canvas,
.share-qr img {
  display: block;
  width: 168px !important;
  height: 168px !important;
  border-radius: 6px;
}

.share-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.share-list__item {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: var(--space-xs) var(--space-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: background 0.1s;
}

.share-list__item:hover {
  background: var(--light-bg);
}

.share-list__item-info {
  flex: 1;
  min-width: 0;
}

.share-list__item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-list__chevron {
  color: var(--border-soft);
  flex-shrink: 0;
  pointer-events: none;
}

.share-list__empty {
  color: var(--soft-text);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-xs);
}

.share-panel__create-new {
  width: 100%;
  margin-top: var(--space-xs);
}

.share-panel__back {
  background: none;
  border: none;
  color: var(--soft-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--space-sm);
}

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

.share-comment-section {
  margin-top: var(--space-xs);
}

.share-email-section {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-soft);
}

.share-panel__success,
.share-panel__save-ok {
  color: var(--color-success-text);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

.share-panel__comment {
  min-height: 72px;
  resize: vertical;
}

.js-share-copy.copy-ok {
  color: var(--color-success-text);
}

/* 11. Confirm-Dialog ------------------------------------ */
.confirm-dialog {
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  padding: var(--space-xl);
  max-width: 400px;
  width: 90vw;
  text-align: center;
}
.confirm-dialog::backdrop {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}
.confirm-dialog__emoji {
  font-size: 2.5rem;
  line-height: 1;
  margin: 0 0 var(--space-sm);
}
.confirm-dialog__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 var(--space-md);
}
.confirm-dialog__text {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0 0 var(--space-sm);
}
.confirm-dialog__note {
  font-size: var(--font-size-sm);
  color: var(--soft-text);
  line-height: 1.5;
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--light-bg);
  border-radius: 6px;
  text-align: left;
}
.confirm-dialog__question {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}
.confirm-dialog__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}
.confirm-dialog--form {
  max-width: 480px;
  text-align: left;
}
.confirm-dialog--form .confirm-dialog__emoji,
.confirm-dialog--form .confirm-dialog__title {
  text-align: center;
}
.confirm-dialog__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}
.confirm-dialog__label-hint {
  font-weight: 400;
  color: var(--soft-text);
}
.confirm-dialog__textarea {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--white);
  resize: vertical;
  margin: 0 0 var(--space-md);
  box-sizing: border-box;
}
.confirm-dialog__textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

/* 12. Rating / Pfoten-Bewertung ------------------------- */
.paw-gradient-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.rating-user {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.rating-paws {
  display: flex;
  gap: 0.1rem;
  align-items: center;
}

.rating-paw {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  line-height: 0;
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), filter var(--transition-fast);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rating-paw .paw-el {
  fill: none;
  stroke: var(--soft-text);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: fill var(--transition-fast), stroke var(--transition-fast);
}

.rating-paw--filled .paw-el {
  fill: url(#paw-fill-gradient);
  stroke: #e0a020;
  stroke-width: 0.5px;
}

@media (hover: hover) {
  .rating-paw:hover {
    transform: scale(1.05);
  }

  .rating-paw--preview .paw-el {
    fill: url(#paw-fill-gradient);
    stroke: #e0a020;
    stroke-width: 0.5px;
    opacity: 0.7;
  }
}

.rating-feedback {
  color: var(--color-success-text);
  font-size: var(--font-size-sm);
  min-height: 1rem;
}

/* 13. Passwort-Stärke ----------------------------------- */
.pw-strength {
  margin-top: 0.5rem;
}

.pw-strength__bars {
  display: flex;
  gap: 4px;
  margin-bottom: 0.3rem;
}

.pw-strength__bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--border-soft);
  transition: background var(--transition-slow);
}

.pw-strength__bar--active-1 { background: var(--color-error); }
.pw-strength__bar--active-2 { background: var(--color-warning); }
.pw-strength__bar--active-3 { background: #3a9e6e; }
.pw-strength__bar--active-4 { background: var(--color-success); }

.pw-strength__label {
  font-size: var(--font-size-sm);
  color: var(--soft-text);
  transition: color var(--transition-slow);
}

.pw-strength__rule {
  font-size: var(--font-size-sm);
  color: var(--soft-text);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.pw-strength__rule--ok {
  color: var(--color-success);
}

.pw-strength__rules {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* 14. Loading-States ------------------------------------ */
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.is-loading {
  opacity: 0.75;
  pointer-events: none;
  position: relative;
  color: transparent !important;
}

.is-loading::after {
  content: '';
  position: absolute;
  inset: 50% 50% auto auto;
  transform: translate(50%, -50%);
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  color: var(--white);
}

.btn--outline.is-loading::after,
.icon-btn.is-loading::after {
  color: var(--primary);
}

.like-btn.is-loading,
.js-coll-like-btn.is-loading {
  color: transparent !important;
}

/* 15. Scroll-to-Top ------------------------------------- */
.scroll-top-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition), background var(--transition), box-shadow var(--transition);
  z-index: 90;
}

.scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top-btn:hover {
  background: var(--primary-deep);
  box-shadow: var(--shadow-lg);
}

/* 16. Paginator ------------------------------------------ */
.paginator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: var(--space-xl) 0;
  flex-wrap: wrap;
}

.paginator__info {
  min-width: 100px;
  text-align: center;
}

.paginator__disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* 17. Klickbare Tabellenzeilen -------------------------- */
tr[data-href] { cursor: pointer; }
@media (hover: hover) and (min-width: 601px) {
  tr[data-href]:hover > td { background: var(--bg-soft); }
}


/* 16. Feature-Requests (.fr-*) ───────────────────────────────────────── */

.fr-form-details {
  margin: var(--space-lg) 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--light-bg);
  overflow: hidden;
}

.fr-form-details__summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--primary);
  list-style: none;
}
.fr-form-details__summary::-webkit-details-marker { display: none; }
.fr-form-details[open] .fr-form-details__summary { border-bottom: 1px solid var(--border-soft); }

/* Klappkarte für das Einreich-Formular */
.profile-form-card.fr-submit-card {
  padding: 0;
  overflow: hidden;
}
.fr-submit-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.fr-submit-card__toggle::-webkit-details-marker { display: none; }
.fr-submit-card__toggle::marker { display: none; }
.fr-submit-card__toggle svg {
  transition: transform 0.2s ease;
  color: var(--soft-text);
  flex-shrink: 0;
}
.fr-submit-card[open] > .fr-submit-card__toggle {
  border-bottom: 1px solid var(--border-soft);
}
.fr-submit-card[open] > .fr-submit-card__toggle svg {
  transform: rotate(180deg);
}
.fr-submit-card__body {
  padding: var(--space-lg) var(--space-xl);
}

.fr-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.fr-form__row { display: flex; flex-direction: column; gap: 0.2rem; }

.fr-cat-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.fr-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-soft);
}
.fr-filter-bar > span {
  color: var(--soft-text);
  font-size: var(--font-size-sm);
}

.fr-filter-btn {
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-decoration: none;
  background: var(--card-bg);
}
.fr-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.fr-filter-btn--active { background: var(--primary); color: #fff; border-color: var(--primary); }

.fr-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fr-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md) 0 calc(var(--space-md) + 0.25rem);
  border-bottom: 1px solid var(--border-soft);
}
.fr-item:last-child { border-bottom: none; }

.fr-item__vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  min-width: 36px;
}

.fr-vote-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: var(--card-bg);
  color: var(--soft-text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}
.fr-vote-btn:hover { border-color: var(--primary); color: var(--primary); }
.fr-vote-btn--active { background: var(--primary); color: #fff; border-color: var(--primary); }

.fr-vote-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
}

.fr-item__body { flex: 1; min-width: 0; }

.fr-item__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.fr-status-chip {
  font-size: var(--font-size-sm);
  font-weight: 500;
  opacity: 0.85;
}

.fr-item__title { margin: 0 0 0.25rem; }
.fr-item__desc  { margin: 0 0 0.25rem; color: var(--soft-text); }

.fr-item__admin-note {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  background: var(--light-bg);
  border-left: 3px solid var(--border-soft);
  padding: 0.4rem 0.6rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0.3rem 0;
  color: var(--soft-text);
}

.fr-item__footer { margin: 0.3rem 0 0; }

.fr-admin-edit {
  margin-top: var(--space-sm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--light-bg);
  overflow: hidden;
}

.fr-admin-toggle {
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  list-style: none;
}
.fr-admin-toggle::-webkit-details-marker { display: none; }

.fr-admin-form {
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* ══ Dark Mode: Komponenten-Overrides ════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238aac7e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* ══ 18. Plattform-Dokumentation (.pdoc-*, .perm-*) ═════════════════════ */

/* Hero */
.pdoc-hero {
  padding: var(--space-lg) 0 var(--space-md);
}
.pdoc-hero__title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 0.25rem;
}
.pdoc-hero__sub {
  font-size: var(--font-size-sm);
  color: var(--soft-text);
  margin: 0;
}

/* Tab-Navigation */
.pdoc-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--border-soft);
  margin-bottom: var(--space-lg);
}
.pdoc-tab {
  padding: 0.55rem 1rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--soft-text);
  text-decoration: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -2px;
  transition: color 0.15s, background 0.15s;
}
.pdoc-tab:hover { color: var(--primary); background: var(--light-bg); }
.pdoc-tab--active {
  color: var(--primary);
  background: var(--bg);
  border-color: var(--border-soft);
  border-bottom-color: var(--bg);
}

/* Tab intro text */
.pdoc-tab-intro {
  font-size: var(--font-size-sm);
  color: var(--soft-text);
  margin: 0 0 var(--space-md);
}

/* Documentation sections */
.pdoc-section {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-soft);
}
.pdoc-section:last-child { border-bottom: none; }

.pdoc-section__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 0.35rem;
}
.pdoc-section__lead {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
  font-style: italic;
}
.pdoc-section__body {
  font-size: 1rem;
  color: var(--color-text);
}
.pdoc-section__body p { margin: 0 0 0.75rem; }
.pdoc-section__body p:last-child { margin-bottom: 0; }

/* Lists within docs */
.pdoc-list {
  margin: 0 0 0.75rem 1.25rem;
  padding: 0;
}
.pdoc-list li { margin-bottom: 0.4rem; line-height: 1.5; }
.pdoc-list li:last-child { margin-bottom: 0; }

/* Note / caption */
.pdoc-note {
  font-size: var(--font-size-sm);
  color: var(--soft-text);
  margin: 0.5rem 0 0;
}

/* Expert accordion */
.pdoc-detail {
  margin-top: var(--space-sm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--light-bg);
}
.pdoc-detail__summary {
  padding: 0.55rem 0.8rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--soft-text);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pdoc-detail__summary::-webkit-details-marker { display: none; }
.pdoc-detail__summary::before {
  content: '▸ ';
  font-size: 0.7rem;
  color: var(--soft-text);
}
details[open] > .pdoc-detail__summary::before { content: '▾ '; }
.pdoc-detail__body {
  padding: 0.75rem 0.8rem;
  border-top: 1px solid var(--border-soft);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.pdoc-detail__body p { margin: 0 0 0.5rem; }
.pdoc-detail__body p:last-child { margin-bottom: 0; }
.pdoc-detail__body code {
  font-family: ui-monospace, 'Cascadia Code', monospace;
  font-size: 0.8rem;
  background: var(--border-soft);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  word-break: break-all;
}

/* Tech table */
.pdoc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  margin-top: 0.5rem;
  overflow-x: auto;
  display: block;
}
.pdoc-table th, .pdoc-table td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.pdoc-table th {
  font-weight: 700;
  color: var(--soft-text);
  font-size: 0.775rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--light-bg);
}
.pdoc-table tr:last-child td { border-bottom: none; }

/* Placeholder box (Roadmap) */
.pdoc-placeholder {
  padding: var(--space-md);
  background: var(--light-bg);
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--soft-text);
  font-size: 1rem;
}
.pdoc-placeholder p { margin: 0 0 0.75rem; }

/* ── Permission Matrix ────────────────────────────────────── */
.perm-matrix-wrap {
  overflow-x: auto;
  margin: var(--space-sm) 0;
  -webkit-overflow-scrolling: touch;
}
.perm-matrix {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.perm-matrix th, .perm-matrix td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
.perm-matrix thead th {
  font-weight: 700;
  color: var(--soft-text);
  font-size: 0.775rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--light-bg);
}
.perm-feat-col { width: 65%; }
.perm-role-col {
  width: 8.75%;
  text-align: center;
  font-size: 0.775rem;
  cursor: help;
}
/* Group headers */
.perm-group-header td {
  background: var(--light-bg);
  font-size: 0.775rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--soft-text);
  padding-top: 0.55rem;
  padding-bottom: 0.35rem;
}
/* Cell states */
.perm-y {
  text-align: center;
  color: #16a34a;
  font-weight: 700;
}
.perm-n {
  text-align: center;
  color: var(--border-soft);
}
.perm-o {
  text-align: center;
  color: #b45309;
  font-size: 0.75rem;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .pdoc-tab--active { background: var(--bg); border-bottom-color: var(--bg); }
  .perm-y { color: #4ade80; }
  .perm-o { color: #fbbf24; }
}

/* ══ 19. Roadmap (.rdmp-*) ═════════════════════════════════════════════ */
.rdmp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.rdmp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.65em;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}
.rdmp-badge--done    { background: color-mix(in srgb, #16a34a 12%, transparent); color: #15803d; }
.rdmp-badge--active  { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.rdmp-badge--planned { background: var(--bg-soft); color: var(--soft-text); }
.rdmp-badge--future  { background: var(--bg-soft); color: var(--border-soft); border: 1px dashed var(--border-soft); }

.rdmp-phase { margin-bottom: var(--space-xl); }
.rdmp-phase__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.rdmp-phase__sub {
  font-size: var(--font-size-sm);
  color: var(--soft-text);
  margin-bottom: var(--space-md);
}

.rdmp-grid {
  display: grid;
  gap: var(--space-md);
}
@media (min-width: 600px) {
  .rdmp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .rdmp-grid { grid-template-columns: repeat(3, 1fr); }
}

.rdmp-card {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rdmp-card--done    { border-color: color-mix(in srgb, #16a34a 25%, transparent); }
.rdmp-card--active  { border-color: color-mix(in srgb, var(--primary) 25%, transparent); }
.rdmp-card--planned { opacity: 0.9; }
.rdmp-card--future  { opacity: 0.75; }

.rdmp-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
}
.rdmp-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0;
  line-height: 1.5;
}

.rdmp-note {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--soft-text);
}
.rdmp-note a { color: var(--primary); }

/* ══ 20. Wocheneinheit-Panel (.weekly-result) ═══════════════════════════ */
.weekly-result {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: color-mix(in srgb, #f59e0b 8%, var(--bg));
  border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
  border-radius: var(--radius-md);
}
.weekly-result__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
}
@media (min-width: 480px) {
  .weekly-result__row { flex-direction: row; align-items: center; }
  .weekly-result__row .form-control { flex: 1; }
}
.weekly-result__row .form-control {
  font-family: monospace;
  font-size: 0.875rem;
}
.weekly-result__qr {
  display: flex;
  justify-content: center;
  margin-top: var(--space-sm);
}

@media (prefers-color-scheme: dark) {
  .rdmp-badge--done   { color: #4ade80; }
  .rdmp-badge--active { color: color-mix(in srgb, var(--primary) 160%, white); }
  .rdmp-card--done    { border-color: color-mix(in srgb, #4ade80 20%, transparent); }
}