/* ===========================
   GuG Board – Frontend Styles
   =========================== */

:root{
  --gug-gold-top:#e9dab7;
  --gug-gold-btm:#ccb07a;
  --gug-gold-text:#3a321e;
  --gug-shadow:0 12px 28px rgba(0,0,0,.10);
  --gug-shadow-h:0 16px 34px rgba(0,0,0,.14);
  --gug-border:rgba(0,0,0,.08);
  /* sichtbarer Rahmen */
  --gug-frame:#b9923c;
  --gug-frame-h:#a57f2f;
}

/* Überschriften/Links */
.gugb-title{color:var(--gug-gold-text)}
.gugb-sub{color:var(--gug-gold-text);opacity:.9}
.gug-backlink a{color:#6a5b36;text-decoration:none}
.gug-backlink a:hover{text-decoration:underline}

/* ---------- Karten/Kacheln ---------- */
.gug-card{
  background:linear-gradient(180deg,var(--gug-gold-top) 0%,var(--gug-gold-btm) 100%);
  border-radius:22px;
  border:2px solid var(--gug-frame);
  box-shadow:var(--gug-shadow), inset 0 0 0 1px rgba(255,255,255,.35);
  padding:18px 22px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
  position:relative;
}
.gug-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--gug-shadow-h), inset 0 0 0 1px rgba(255,255,255,.45);
  border-color:var(--gug-frame-h);
  filter:saturate(1.02);
}
.gug-card-link{display:block;text-decoration:none;color:inherit}
.gug-card-title{font-weight:700;font-size:1.2rem;line-height:1.25;color:var(--gug-gold-text);margin:0 0 .35rem 0}
/* Einzelansicht: größere Überschrift in der oberen Kachel */
.gug-single-card .gug-card-title{font-size:1.8rem;line-height:1.25}
.gug-card-meta{font-size:.92rem;opacity:.85;color:#2c2c2c;margin-bottom:.5rem}
.gug-card-excerpt{color:#222}
.gug-badge{display:inline-block;margin-left:.35rem;padding:.1rem .45rem;border-radius:.5rem;font-size:.8rem;line-height:1.2;background:rgba(0,0,0,.12);color:#222}
.gug-badge-pending{background:rgba(255,165,0,.25);color:#5a3a00}
.gugb-toggle-form{white-space:nowrap}

/* ---------- Liste im Brett ---------- */
.gug-board-list{
  list-style:none;margin:0;padding:0;
  display:grid; grid-template-columns:1fr; gap:1rem;
}

/* ---------- Mindsets (falls genutzt) ---------- */
.gug-mindsets{margin:1.25rem 0 2rem 0}
.gug-ms-heading{font-size:1.15rem;margin-bottom:.75rem;color:var(--gug-gold-text)}
.gug-ms-form .gug-ms-row{margin-bottom:.6rem}
.gug-ms-form input[type="text"], .gug-ms-form textarea, .gug-ms-form select{width:100%;max-width:100%}
.gug-ms-list{list-style:none;margin:1rem 0 0;padding:0}
.gug-ms-item{
  padding:.75rem 1rem;border-radius:16px;background:#fff;
  border:2px solid var(--gug-frame);
  box-shadow:0 8px 20px rgba(0,0,0,.06), inset 0 0 0 1px rgba(255,255,255,.35);
  margin-bottom:.75rem;
}
.gug-ms-item:hover{border-color:var(--gug-frame-h)}
.gug-ms-title{font-weight:600;margin-bottom:.25rem;color:#2a2a2a}
.gug-ms-meta{font-size:.9rem;color:#666;margin-bottom:.5rem}
.gug-ms-actions{margin-top:.5rem}
.gug-ms-actions .button-link-delete{color:#a31212}

/* ---------- Einzelansicht (Beitrag & Kommentare) ---------- */
.gug-single-card{margin-bottom:1.25rem}
.gug-single-content p:last-child{margin-bottom:0}

/* Kommentarbereich als Karte mit Rahmen */
.gug-comment-card{
  background:#fff;
  border:2px solid var(--gug-frame);
  border-radius:22px;
  box-shadow:0 10px 24px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.35);
  padding:18px 22px;
}
/* „Angemeldet als …“ kleiner & neutral */
.gug-comment-card .logged-in-as{font-size:.9rem;color:#6b6b6b;margin-bottom:.75rem}
.gug-comment-card .logged-in-as a{pointer-events:none;text-decoration:none;color:inherit}

/* ---------- Akkordeon (Button klein, Formular zentriert) ---------- */
.gugb-form-accordion{
  display:block;
  margin:0 auto 1rem;
  text-align:right;           /* Button rechts; auf left/center änderbar */
  border:0; padding:0; background:transparent;
}
/* Button/summary schmal halten (keine 100%-Breite) */
summary.gugb-summary-btn,
.gugb-form-accordion > summary{
  display:inline-block;
  width:auto;
  white-space:nowrap;
  cursor:pointer;
}
summary.gugb-summary-btn::-webkit-details-marker,
.gugb-form-accordion > summary::-webkit-details-marker{ display:none; }
/* wenn geöffnet, Button leicht betont */
.gugb-form-accordion[open] summary.gugb-summary-btn,
.gugb-form-accordion[open] > summary{ filter:brightness(0.98); }

/* Formular-Kachel mittig */
.gug-center{ max-width:720px; margin:1rem auto 0; }

/* ---------- Responsive ---------- */
@media (min-width:900px){
  /* Zweispaltig aktivierbar:
     .gug-board-list{ grid-template-columns:1fr 1fr }
  */
}
.gugb-badges legend{ color:var(--gug-gold-text); }
.gugb-badges label{ color:#6a5b36; }
.gugb-badges input[type="date"]{ max-width: 260px; }
/* Preisvergleich */
.gugb-price-form input[type="number"]{ text-align:right; }
.gugb-prices h3{ color:var(--gug-gold-text); }
/* Preisfeld breiter, rechtsbündig, ohne Spinner */
.gugb-price-form .gugb-price-field{
  width:220px;
  text-align:right;
}

/* falls irgendwo noch type=number genutzt wird: Spinner ausblenden */
.gugb-price-form input[type=number]::-webkit-outer-spin-button,
.gugb-price-form input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none; margin:0;
}
.gugb-price-form input[type=number]{ -moz-appearance: textfield; }