* {
  box-sizing: border-box;
}

body {
  margin: 0;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: #f5f5f5;
  color: #222;
}

a {
  color: inherit;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px;
}

.narrow {
  max-width: 900px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 32px;

  background: #fff;
  border-bottom: 1px solid #ddd;
}

.topbar a {
  margin-right: 16px;
}

.inline {
  display: inline;
  margin-left: 16px;
}

.login-page {
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 420px;

  background: #fff;

  padding: 32px;

  border-radius: 12px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.08);
}

label {
  display: block;
  margin-bottom: 18px;
}

input,
textarea,
select {
  width: 100%;

  margin-top: 6px;
  padding: 12px;

  border: 1px solid #bbb;
  border-radius: 6px;

  font: inherit;
}

button {
  padding: 10px 16px;

  border: 0;
  border-radius: 6px;

  cursor: pointer;

  font: inherit;
}

.login-card button {
  width: 100%;
}

.alert {
  padding: 12px;
  margin-bottom: 18px;

  border-radius: 6px;
}

.alert-error {
  background: #ffe3e3;
}

.alert-info {
  background: #e7f2ff;
}

.alert-success {
  background: #e5f7e8;
}

.muted {
  color: #666;
}

.dashboard-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(180px, 1fr)
    );

  gap: 20px;

  margin: 24px 0 40px;
}

.stat-card {
  background: #fff;

  padding: 24px;

  border-radius: 10px;

  box-shadow:
    0 3px 12px
    rgba(0, 0, 0, 0.05);
}

.stat-card span {
  display: block;
  color: #666;
}

.stat-card strong {
  display: block;

  margin-top: 8px;

  font-size: 2rem;
}

.admin-menu {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(200px, 1fr)
    );

  gap: 16px;
}

.admin-menu a {
  display: block;

  padding: 20px;

  background: #fff;
  color: #222;

  text-decoration: none;

  border-radius: 8px;

  box-shadow:
    0 2px 8px
    rgba(0, 0, 0, 0.05);
}

.page-header,
.section-header,
.form-actions,
.option-group-header,
.channel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.form-card {
  background: #fff;

  padding: 24px;
  margin-bottom: 24px;

  border-radius: 10px;

  box-shadow:
    0 2px 10px
    rgba(0, 0, 0, 0.05);
}

.radio-row,
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.radio-row input,
.checkbox-row input {
  width: auto;
  margin-top: 4px;
}

.form-grid-3 {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 16px;
}

.channel-row {
  align-items: end;
  margin-bottom: 16px;
}

.channel-row > * {
  flex: 1;
}

.option-group-card {
  border: 1px solid #ddd;
  border-radius: 8px;

  padding: 18px;
  margin-top: 18px;
}

.option-group-name {
  max-width: 350px;
}

.option-value-row {
  display: flex;
  gap: 10px;

  margin-top: 12px;
}

.option-value-row input {
  margin-top: 0;
}

.danger-small {
  white-space: nowrap;
}

.add-value {
  margin-top: 12px;
}

.form-actions {
  margin: 30px 0;
}

.button-link {
  display: inline-block;

  text-decoration: none;

  padding: 10px 16px;

  background: #fff;

  border-radius: 6px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;

  border-collapse: collapse;

  background: #fff;
}

th,
td {
  padding: 14px;

  text-align: left;

  border-bottom:
    1px solid #ddd;

  vertical-align: middle;
}

th {
  white-space: nowrap;
}

.stock-input {
  max-width: 100px;
}

.empty-state {
  padding: 40px;

  text-align: center;

  background: #fff;

  border-radius: 10px;
}

.product-image-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(180px, 1fr)
    );

  gap: 20px;

  margin: 20px 0;
}

.product-image-card {
  overflow: hidden;

  background: #fff;

  border:
    1px solid #ddd;

  border-radius: 8px;
}

.product-image-preview {
  position: relative;

  aspect-ratio: 1 / 1;

  background: #eee;
}

.product-image-preview img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}

.image-badge {
  position: absolute;

  left: 8px;
  bottom: 8px;

  padding: 5px 8px;

  background:
    rgba(
      0,
      0,
      0,
      0.75
    );

  color: white;

  border-radius: 4px;

  font-size: 0.8rem;
}

.product-image-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  padding: 10px;
}

.image-upload-form {
  margin-top: 24px;
}

.product-list-image,
.product-list-placeholder {
  width: 64px;
  height: 64px;

  border-radius: 6px;
}

.product-list-image {
  display: block;

  object-fit: cover;
}

.product-list-placeholder {
  display: flex;

  align-items: center;
  justify-content: center;

  padding: 5px;

  text-align: center;

  background: #eee;
  color: #777;

  font-size: 0.7rem;
}

@media (
  max-width: 700px
) {

  .form-grid-3 {
    grid-template-columns: 1fr;
  }

  .page-header,
  .section-header,
  .channel-row {
    align-items: stretch;
    flex-direction: column;
  }

  .container {
    padding: 18px;
  }

  .topbar {
    padding: 14px 18px;
  }
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  white-space: nowrap;
}

.product-actions a {
  text-decoration: none;
}

.product-actions a:hover {
  text-decoration: underline;
}


/* =========================================================
   Produktoptionen
   ========================================================= */

.existing-option-values {
  display: flex;
  flex-direction: column;
  gap: 12px;

  margin-bottom: 16px;
}

.existing-option-value {
  display: grid;

  grid-template-columns:
    minmax(200px, 1fr)
    auto;

  align-items: center;

  gap: 16px;

  padding: 12px;

  background: #f7f7f7;

  border-radius: 8px;
}

.existing-option-value input[type="text"] {
  margin: 0;
}

.option-active-toggle {
  display: flex;

  align-items: center;

  gap: 8px;

  margin: 0;

  white-space: nowrap;
}

.option-active-toggle input {
  width: auto;

  margin: 0;
}

.new-option-value {
  grid-template-columns:
    minmax(200px, 1fr)
    auto
    auto;

  background: #f0f7ff;
}

.remove-new-option-value {
  white-space: nowrap;
}


@media (max-width: 700px) {

  .existing-option-value,
  .new-option-value {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   Kategorien
   ========================================================= */

.form-grid-category {
  display: grid;

  grid-template-columns:
    minmax(250px, 1fr)
    160px;

  gap: 20px;
}

.status-active {
  display: inline-block;

  padding: 4px 8px;

  border-radius: 5px;

  background: #e5f7e8;
}

.status-inactive {
  display: inline-block;

  padding: 4px 8px;

  border-radius: 5px;

  background: #eee;

  color: #666;
}


@media (max-width: 700px) {

  .form-grid-category {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   Mitgliedershop
   ========================================================= */

.shop-body {
  background: #f4f5f7;
}

.shop-header {
  min-height: 68px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 14px 30px;

  background: #fff;

  border-bottom:
    1px solid #ddd;
}

.shop-brand {
  font-size: 1.35rem;
  font-weight: 700;

  text-decoration: none;
}

.shop-nav {
  display: flex;
  align-items: center;

  gap: 20px;
}

.shop-nav a {
  text-decoration: none;
}

.shop-logout {
  background: transparent;

  padding:
    6px 0;
}

.cart-link {
  display: flex;
  align-items: center;

  gap: 7px;
}

.cart-count {
  min-width: 24px;
  height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 6px;

  border-radius: 999px;

  background: #222;
  color: #fff;

  font-size: 0.8rem;
}

.shop-container {
  width: min(
    1280px,
    calc(100% - 40px)
  );

  margin:
    0 auto;

  padding:
    32px 0 60px;
}

.shop-intro {
  margin-bottom: 26px;
}

.shop-intro h1 {
  margin-bottom: 5px;
}

.category-filter {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 28px;
}

.category-filter a {
  padding:
    9px 14px;

  background: #fff;

  border:
    1px solid #ddd;

  border-radius: 999px;

  text-decoration: none;
}

.category-filter a.active {
  background: #222;
  color: #fff;

  border-color: #222;
}

.shop-product-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(240px, 1fr)
    );

  gap: 24px;
}

.shop-product-card {
  overflow: hidden;

  display: flex;
  flex-direction: column;

  background: #fff;

  border-radius: 12px;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.06);
}

.shop-product-image {
  display: block;

  aspect-ratio:
    1 / 1;

  background: #eee;

  overflow: hidden;
}

.shop-product-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.shop-image-placeholder {
  width: 100%;
  height: 100%;

  min-height: 180px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #eee;
  color: #777;

  text-align: center;
}

.shop-product-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 20px;
}

.shop-product-content h2 {
  margin:
    5px 0 10px;

  font-size: 1.15rem;
}

.shop-product-content h2 a {
  text-decoration: none;
}

.shop-product-category {
  color: #777;

  font-size: 0.82rem;

  text-transform: uppercase;

  letter-spacing:
    0.04em;
}

.shop-product-price {
  margin-bottom: 8px;

  font-size: 1.3rem;
  font-weight: 700;
}

.shop-delivery {
  margin-bottom: 20px;

  color: #666;

  font-size: 0.85rem;
}

.shop-button {
  display: inline-block;

  margin-top: auto;

  padding:
    11px 18px;

  border: 0;
  border-radius: 7px;

  background: #222;
  color: #fff;

  text-decoration: none;
  text-align: center;

  cursor: pointer;
}

.shop-button:disabled {
  opacity: 0.45;

  cursor: not-allowed;
}

.shop-button-large {
  width: 100%;

  padding:
    14px 20px;

  font-size: 1rem;
}

.shop-empty {
  padding: 50px;

  background: #fff;

  border-radius: 10px;

  text-align: center;
}

.shop-back {
  display: inline-block;

  margin-bottom: 24px;

  text-decoration: none;
}


/* Produktdetail */

.product-detail-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(320px, 0.9fr);

  gap: 48px;

  align-items: start;
}

.product-main-image {
  overflow: hidden;

  aspect-ratio:
    1 / 1;

  background: #fff;

  border-radius: 12px;
}

.product-main-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
}

.product-thumbnails {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 12px;
}

.product-thumbnail {
  width: 82px;
  height: 82px;

  padding: 0;

  overflow: hidden;

  border:
    1px solid #ddd;

  background: #fff;
}

.product-thumbnail img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

.product-purchase {
  padding: 28px;

  background: #fff;

  border-radius: 12px;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.05);
}

.product-purchase h1 {
  margin:
    5px 0 10px;
}

.product-detail-price {
  margin:
    24px 0;

  font-size: 1.8rem;
  font-weight: 700;
}

.product-description {
  margin:
    20px 0;

  white-space: pre-line;

  line-height: 1.6;
}

.product-delivery-box {
  margin:
    20px 0;

  padding:
    12px 14px;

  background:
    #f4f5f7;

  border-radius: 7px;
}

.product-option-select {
  margin-top: 18px;
}

.product-option-select span {
  display: block;

  margin-bottom: 5px;

  font-weight: 600;
}

.variant-status {
  min-height: 24px;

  margin:
    16px 0;

  color: #555;
}

.quantity-field {
  max-width: 130px;
}


/* Warenkorb */

.cart-items {
  display: flex;

  flex-direction: column;

  gap: 14px;
}

.cart-item {
  display: grid;

  grid-template-columns:
    100px
    minmax(180px, 1fr)
    110px
    100px
    120px
    auto;

  gap: 18px;

  align-items: center;

  padding: 16px;

  background: #fff;

  border-radius: 10px;
}

.cart-item-image {
  width: 100px;
  height: 100px;

  overflow: hidden;

  border-radius: 7px;

  background: #eee;
}

.cart-item-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.cart-item-info h2 {
  margin:
    0 0 6px;

  font-size: 1rem;
}

.cart-item-info h2 a {
  text-decoration: none;
}

.cart-item-price,
.cart-item-total {
  white-space: nowrap;
}

.cart-item-quantity label {
  margin: 0;
}

.cart-item-quantity input {
  margin-top: 5px;
}

.cart-remove-button {
  padding:
    7px 9px;

  background:
    #f0f0f0;
}

.cart-stock-error {
  margin-top: 6px;

  color: #a40000;

  font-weight: 600;
}

.cart-actions {
  margin:
    20px 0;

  text-align: right;
}

.cart-summary {
  width: min(
    100%,
    460px
  );

  margin:
    30px 0 0 auto;

  padding: 24px;

  background: #fff;

  border-radius: 10px;
}

.cart-total-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 20px;

  font-size: 1.25rem;
}


@media (max-width: 900px) {

  .product-detail-layout {
    grid-template-columns: 1fr;
  }

  .cart-item {
    grid-template-columns:
      80px
      1fr;

    align-items: start;
  }

  .cart-item-image {
    width: 80px;
    height: 80px;

    grid-row:
      span 5;
  }

  .cart-item-price,
  .cart-item-quantity,
  .cart-item-total,
  .cart-item-remove {
    grid-column: 2;
  }

}


@media (max-width: 650px) {

  .shop-header {
    align-items: flex-start;

    flex-direction: column;

    padding:
      14px 18px;
  }

  .shop-nav {
    width: 100%;

    flex-wrap: wrap;
  }

  .shop-container {
    width:
      calc(100% - 28px);

    padding-top: 20px;
  }

  .shop-product-grid {
    grid-template-columns:
      repeat(
        auto-fill,
        minmax(160px, 1fr)
      );

    gap: 14px;
  }

  .shop-product-content {
    padding: 14px;
  }

  .product-purchase {
    padding: 20px;
  }

}


/* =========================================================
   Vereinsfarbe Shop – Königsblau
   ========================================================= */

:root {
  --club-blue: #4169E1;
  --club-blue-hover: #3154b8;
}


/* Schwarze Schrift im Shop -> Königsblau */

.shop-body {
  color: var(--club-blue);
}

.shop-body h1,
.shop-body h2,
.shop-body h3,
.shop-body h4,
.shop-body strong {
  color: var(--club-blue);
}

.shop-body a {
  color: var(--club-blue);
}


/* Shop-Logo */

.shop-brand {
  color: var(--club-blue);
}


/* Schwarze Hauptbuttons -> Königsblau */

.shop-button {
  background: var(--club-blue);
  color: #fff;
}

.shop-button:hover:not(:disabled) {
  background: var(--club-blue-hover);
}


/* Aktive Kategorie */

.category-filter a.active {
  background: var(--club-blue);
  border-color: var(--club-blue);
  color: #fff;
}


/* Warenkorb-Zähler */

.cart-count {
  background: var(--club-blue);
  color: #fff;
}


/* Abmelden / normale Shop-Buttons */

.shop-logout {
  color: var(--club-blue);
}


/* Entfernen-Button im Warenkorb */

.cart-remove-button {
  color: var(--club-blue);
}


/* Eingaben selbst bleiben gut lesbar schwarz */

.shop-body input,
.shop-body select,
.shop-body textarea {
  color: #222;
}


/* Bewusst weiterhin grau:
   Lieferzeit, Kategoriebezeichnung, Hinweise usw. */

.shop-body .muted,
.shop-product-category,
.shop-delivery,
.variant-status {
  color: #666;
}


/* =========================================================
   FunkenShop Vereinsfarben
   Dunkles Königsblau
   ========================================================= */

:root {
  --club-blue: #27408B;
  --club-blue-hover: #1F346F;
}


/* =========================================================
   SHOP
   ========================================================= */

.shop-body {
  color: var(--club-blue);
}

.shop-body h1,
.shop-body h2,
.shop-body h3,
.shop-body h4,
.shop-body h5,
.shop-body h6,
.shop-body strong {
  color: var(--club-blue);
}

.shop-body a {
  color: var(--club-blue);
}

.shop-brand {
  color: var(--club-blue);
}


/* Shop-Buttons */

.shop-button,
.shop-body button:not(.product-thumbnail) {
  background: var(--club-blue);
  color: #fff;
}

.shop-button:hover:not(:disabled),
.shop-body button:not(.product-thumbnail):hover:not(:disabled) {
  background: var(--club-blue-hover);
  color: #fff;
}


/* Links innerhalb blauer Buttons immer weiß */

.shop-button,
.shop-button:link,
.shop-button:visited,
.shop-button:hover,
.shop-button:active {
  color: #fff;
}


/* Aktive Kategorie */

.category-filter a.active,
.category-filter a.active:link,
.category-filter a.active:visited {
  background: var(--club-blue);
  border-color: var(--club-blue);
  color: #fff;
}


/* Warenkorb-Zähler */

.cart-count {
  background: var(--club-blue);
  color: #fff;
}


/* Bildvorschau-Buttons sollen keine blaue Fläche bekommen */

.product-thumbnail {
  background: #fff;
  color: var(--club-blue);
}


/* Formulareingaben bleiben schwarz */

.shop-body input,
.shop-body select,
.shop-body textarea,
.shop-body option {
  color: #222;
}


/* Sekundäre Hinweise bleiben grau */

.shop-body .muted,
.shop-product-category,
.shop-delivery,
.variant-status {
  color: #666;
}


/* =========================================================
   ADMINBEREICH + LOGIN
   ========================================================= */

body:not(.shop-body) {
  color: var(--club-blue);
}

body:not(.shop-body) h1,
body:not(.shop-body) h2,
body:not(.shop-body) h3,
body:not(.shop-body) h4,
body:not(.shop-body) h5,
body:not(.shop-body) h6,
body:not(.shop-body) strong {
  color: var(--club-blue);
}

body:not(.shop-body) a {
  color: var(--club-blue);
}


/* Admin-Buttons */

body:not(.shop-body) button {
  background: var(--club-blue);
  color: #fff;
}

body:not(.shop-body) button:hover:not(:disabled) {
  background: var(--club-blue-hover);
  color: #fff;
}


/* Dashboard-Kacheln / Menülinks */

.admin-menu a {
  color: var(--club-blue);
}

.button-link,
.button-link:link,
.button-link:visited {
  background: var(--club-blue);
  color: #fff;
}

.button-link:hover {
  background: var(--club-blue-hover);
  color: #fff;
}


/* Formulareingaben im Adminbereich bleiben schwarz */

body:not(.shop-body) input,
body:not(.shop-body) textarea,
body:not(.shop-body) select,
body:not(.shop-body) option {
  color: #222;
}


/* Checkboxen und Radiobuttons nicht blau hinterlegen */

body:not(.shop-body) input[type="checkbox"],
body:not(.shop-body) input[type="radio"] {
  accent-color: var(--club-blue);
}


/* Sekundärtexte weiterhin grau */

body:not(.shop-body) .muted {
  color: #666;
}


/* Statusfelder behalten ihre Bedeutung */

.status-active {
  color: var(--club-blue);
}

.status-inactive {
  color: #666;
}


/* Links innerhalb blauer Buttons sicher weiß halten */

body:not(.shop-body) button a,
.shop-body button a {
  color: #fff;
}


/* =========================================================
   ADMINPANEL – Vereinsfarbschema
   ========================================================= */

:root {
  --club-blue: #27408B;
  --club-blue-hover: #1F346F;
}


/* Grundschrift Admin */

body:not(.shop-body) {
  color: var(--club-blue);
}


/* Überschriften */

body:not(.shop-body) h1,
body:not(.shop-body) h2,
body:not(.shop-body) h3,
body:not(.shop-body) h4,
body:not(.shop-body) h5,
body:not(.shop-body) h6 {
  color: var(--club-blue);
}


/* Kopfzeile */

body:not(.shop-body) .topbar {
  color: var(--club-blue);
}

body:not(.shop-body) .topbar strong {
  color: var(--club-blue);
}

body:not(.shop-body) .topbar a {
  color: var(--club-blue);
  text-decoration: none;
}

body:not(.shop-body) .topbar a:hover {
  color: var(--club-blue-hover);
}


/* Normale Links */

body:not(.shop-body) a {
  color: var(--club-blue);
}

body:not(.shop-body) a:hover {
  color: var(--club-blue-hover);
}


/* Buttons */

body:not(.shop-body) button,
body:not(.shop-body) input[type="submit"] {
  background: var(--club-blue);
  color: #fff;

  border: 0;
}

body:not(.shop-body) button:hover:not(:disabled),
body:not(.shop-body) input[type="submit"]:hover {
  background: var(--club-blue-hover);
  color: #fff;
}


/* Links, die wie Buttons aussehen */

body:not(.shop-body) .button-link,
body:not(.shop-body) .button-link:link,
body:not(.shop-body) .button-link:visited,
body:not(.shop-body) .button-link:hover,
body:not(.shop-body) .button-link:active {
  background: var(--club-blue);
  color: #fff;
  text-decoration: none;
}

body:not(.shop-body) .button-link:hover {
  background: var(--club-blue-hover);
}


/* Dashboard-Kacheln */

body:not(.shop-body) .stat-card {
  color: var(--club-blue);
}

body:not(.shop-body) .stat-card strong {
  color: var(--club-blue);
}

body:not(.shop-body) .stat-card span {
  color: #666;
}


/* Admin-Menü */

body:not(.shop-body) .admin-menu a {
  color: var(--club-blue);

  border:
    1px solid
    rgba(39, 64, 139, 0.15);
}

body:not(.shop-body) .admin-menu a:hover {
  color: var(--club-blue-hover);

  border-color:
    rgba(39, 64, 139, 0.35);
}


/* Formularkarten */

body:not(.shop-body) .form-card {
  color: var(--club-blue);
}

body:not(.shop-body) .form-card strong {
  color: var(--club-blue);
}


/* Tabellen */

body:not(.shop-body) table {
  color: var(--club-blue);
}

body:not(.shop-body) th {
  color: var(--club-blue);
}

body:not(.shop-body) td strong {
  color: var(--club-blue);
}


/* Eingabefelder bewusst schwarz */

body:not(.shop-body) input[type="text"],
body:not(.shop-body) input[type="email"],
body:not(.shop-body) input[type="password"],
body:not(.shop-body) input[type="number"],
body:not(.shop-body) input[type="file"],
body:not(.shop-body) textarea,
body:not(.shop-body) select,
body:not(.shop-body) option {
  color: #222;
}


/* Checkboxen / Radiobuttons */

body:not(.shop-body) input[type="checkbox"],
body:not(.shop-body) input[type="radio"] {
  accent-color: var(--club-blue);
}


/* Sekundärtexte */

body:not(.shop-body) .muted {
  color: #666;
}


/* Hinweise */

body:not(.shop-body) .alert-info {
  color: var(--club-blue);
}

body:not(.shop-body) .alert-success {
  color: var(--club-blue);
}


/* Produktoptionen */

body:not(.shop-body) .option-group-card,
body:not(.shop-body) .existing-option-value {
  color: var(--club-blue);
}


/* Hauptbild-Badge bleibt kontrastreich */

body:not(.shop-body) .image-badge {
  background: var(--club-blue);
  color: #fff;
}


/* Status Aktiv */

body:not(.shop-body) .status-active {
  color: var(--club-blue);
}


/* Button-Inhalte immer weiß */

body:not(.shop-body) button,
body:not(.shop-body) button *,
body:not(.shop-body) input[type="submit"] {
  color: #fff;
}


/* Deaktivierte Buttons */

body:not(.shop-body) button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* Abmeldebutton im Shop */

.shop-body .shop-logout {
  min-width: 110px;
  padding: 10px 18px;

  background: var(--club-blue);
  color: #fff;

  border-radius: 7px;

  white-space: nowrap;
}

.shop-body .shop-logout:hover {
  background: var(--club-blue-hover);
  color: #fff;
}


/* =========================================================
   Checkout
   ========================================================= */

.checkout-container,
.confirmation-container {
  max-width: 1150px;
}

.checkout-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1.2fr)
    minmax(320px, 0.8fr);

  gap: 28px;

  align-items: start;
}

.checkout-card {
  margin-bottom: 22px;

  padding: 24px;

  background: #fff;

  border-radius: 12px;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.05);
}

.checkout-card h2 {
  margin-top: 0;
}

.checkout-item,
.confirmation-item {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding:
    14px 0;

  border-bottom:
    1px solid #eee;
}

.checkout-total {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-top: 18px;

  padding-top: 18px;

  border-top:
    2px solid #ddd;

  font-size: 1.2rem;
}

.checkout-choice {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 14px;

  margin-bottom: 12px;

  border:
    1px solid #ddd;

  border-radius: 8px;

  cursor: pointer;
}

.checkout-choice input {
  width: auto;

  margin-top: 4px;

  accent-color:
    var(--club-blue);
}

.meeting-selection {
  display: none;

  margin:
    6px 0 20px 34px;
}

.checkout-legal {
  margin:
    28px 0 18px;

  padding: 14px;

  background: #f5f5f5;

  border-radius: 8px;

  font-size: 0.9rem;
}

.shop-absence-notice {
  margin-bottom: 24px;

  padding: 18px 20px;

  background: #eef2ff;

  border-left:
    5px solid
    var(--club-blue);

  border-radius: 8px;
}

.shop-absence-notice p {
  margin:
    7px 0 0;
}


/* =========================================================
   Bestellbestätigung
   ========================================================= */

.order-success {
  margin-bottom: 30px;

  text-align: center;
}

.order-success-icon {
  width: 64px;
  height: 64px;

  display: flex;

  align-items: center;
  justify-content: center;

  margin:
    0 auto 16px;

  border-radius: 50%;

  background:
    var(--club-blue);

  color: #fff;

  font-size: 2rem;
  font-weight: 700;
}

.order-number {
  display: inline-flex;

  flex-direction: column;

  gap: 3px;

  margin-top: 14px;

  padding:
    12px 24px;

  background: #fff;

  border-radius: 8px;
}

.order-number span {
  color: #666;

  font-size: 0.85rem;
}

.confirmation-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 24px;
}

.bank-details {
  display: flex;

  flex-direction: column;

  gap: 14px;
}

.bank-details > div {
  display: flex;

  flex-direction: column;

  gap: 3px;
}

.bank-details span {
  color: #666;

  font-size: 0.85rem;
}

.payment-deadline {
  margin-top: 24px;

  padding-top: 18px;

  border-top:
    1px solid #ddd;
}

.confirmation-actions {
  margin-top: 10px;

  text-align: center;
}


@media (max-width: 800px) {

  .checkout-layout,
  .confirmation-grid {
    grid-template-columns: 1fr;
  }

  .meeting-selection {
    margin-left: 0;
  }

}


/* =========================================================
   Admin – Bestellungen
   ========================================================= */

.admin-filter {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin:
    0 0 25px;
}

.admin-filter a {
  padding:
    8px 13px;

  border:
    1px solid
    rgba(39, 64, 139, 0.25);

  border-radius:
    999px;

  text-decoration: none;
}

.admin-filter a.active {
  background:
    var(--club-blue);

  color: #fff;

  border-color:
    var(--club-blue);
}

.admin-filter a.active:hover {
  color: #fff;
}

.order-badge {
  display:
    inline-block;

  padding:
    5px 9px;

  border-radius:
    999px;

  font-size:
    0.82rem;

  white-space:
    nowrap;
}

.order-badge-large {
  padding:
    8px 13px;

  font-size:
    0.95rem;
}

.order-paid {
  background:
    #e3f5e8;

  color:
    #146b2e;
}

.order-payment-pending {
  background:
    #fff0cf;

  color:
    #785500;
}

.order-cancelled {
  background:
    #eee;

  color:
    #666;
}

.admin-back-link {
  display:
    inline-block;

  margin-bottom:
    20px;

  text-decoration:
    none;
}

.admin-order-layout {
  display:
    grid;

  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(300px, 0.7fr);

  gap:
    24px;

  align-items:
    start;
}

.admin-order-item {
  display:
    grid;

  grid-template-columns:
    minmax(200px, 1fr)
    auto
    auto;

  gap:
    22px;

  align-items:
    center;

  padding:
    15px 0;

  border-bottom:
    1px solid #eee;
}

.reservation-info {
  margin-top:
    7px;

  font-size:
    0.85rem;

  color:
    #666;
}

.admin-action-button {
  width:
    100%;
}

.admin-danger-card {
  border:
    1px solid
    #e4bcbc;
}

body:not(.shop-body)
.danger-action-button {
  width:
    100%;

  background:
    #8b2727;

  color:
    #fff;
}

body:not(.shop-body)
.danger-action-button:hover {
  background:
    #6f1f1f;

  color:
    #fff;
}

.order-history {
  display:
    flex;

  flex-direction:
    column;
}

.order-history-entry {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    12px 0;

  border-bottom:
    1px solid #eee;
}


@media (max-width: 850px) {

  .admin-order-layout {
    grid-template-columns:
      1fr;
  }

  .admin-order-item {
    grid-template-columns:
      1fr;
  }

  .order-history-entry {
    flex-direction:
      column;

    gap:
      4px;
  }

}


/* =========================================================
   404-Seite
   ========================================================= */

.error-page {
  margin: 0;

  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px 20px;

  background: #f5f5f5;

  color: var(--club-blue);
}


.error-page-container {
  width: min(
    100%,
    850px
  );

  text-align: center;
}


.error-image-wrapper {
  overflow: hidden;

  background: #fff;

  border-radius: 16px;

  box-shadow:
    0 5px 24px
    rgba(0, 0, 0, 0.08);
}


.error-404-image {
  width: 100%;
  height: auto;

  display: block;
}


.error-actions {
  display: flex;

  flex-wrap: wrap;

  align-items: center;
  justify-content: center;

  gap: 18px;

  margin-top: 28px;
}


.error-home-button,
.error-home-button:link,
.error-home-button:visited {
  display: inline-block;

  padding: 12px 24px;

  background: var(--club-blue);
  color: #fff;

  border-radius: 8px;

  text-decoration: none;

  font-weight: 600;
}


.error-home-button:hover {
  background: var(--club-blue-hover);
  color: #fff;
}


.error-secondary-link {
  color: var(--club-blue);

  text-decoration: none;

  font-weight: 600;
}


.error-secondary-link:hover {
  color: var(--club-blue-hover);

  text-decoration: underline;
}


@media (max-width: 600px) {

  .error-page {
    padding: 18px 12px;
  }


  .error-image-wrapper {
    border-radius: 10px;
  }


  .error-actions {
    flex-direction: column;
  }


  .error-home-button {
    width: 100%;
  }

}


/* =========================================================
   Einstellungen / Versammlungen
   ========================================================= */

.form-grid-2 {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 20px;
}

label small {
  display: block;

  margin-top: 5px;
}

.absence-settings {
  margin-top: 20px;

  padding-top: 20px;

  border-top:
    1px solid #ddd;

  transition:
    opacity 0.2s ease;
}

.absence-settings.disabled-section {
  opacity: 0.5;
}

.absence-settings.disabled-section
input,
.absence-settings.disabled-section
textarea {
  pointer-events: none;
}

body:not(.shop-body)
.form-card input[type="date"] {
  color: #222;
}


@media (max-width: 700px) {

  .form-grid-2 {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   Mitgliederverwaltung
   ========================================================= */

.member-order-value {
  font-size: 1.4rem !important;
}


/* =========================================================
   Meine Bestellungen
   ========================================================= */

.member-orders {
  display: flex;

  flex-direction: column;

  gap: 12px;
}


.member-order-card {
  display: grid;

  grid-template-columns:
    minmax(190px, 1.3fr)
    110px
    130px
    130px
    30px;

  gap: 18px;

  align-items: center;

  padding: 18px 20px;

  background: #fff;

  border-radius: 10px;

  box-shadow:
    0 2px 10px
    rgba(0, 0, 0, 0.05);

  text-decoration: none;
}


.member-order-card:hover {
  box-shadow:
    0 4px 16px
    rgba(0, 0, 0, 0.09);
}


.member-order-main {
  display: flex;

  flex-direction: column;

  gap: 4px;
}


.member-order-number {
  font-size: 1.05rem;
}


.member-order-amount {
  white-space: nowrap;
}


.member-order-arrow {
  font-size: 1.4rem;

  text-align: right;
}


.member-order-item {
  display: grid;

  grid-template-columns:
    70px
    minmax(180px, 1fr)
    auto;

  gap: 16px;

  align-items: center;

  padding: 14px 0;

  border-bottom:
    1px solid #eee;
}


.member-order-item > img {
  width: 70px;
  height: 70px;

  display: block;

  object-fit: cover;

  border-radius: 7px;
}


.member-order-item-total {
  white-space: nowrap;
}


.member-current-status {
  font-size: 1.15rem;
}


@media (max-width: 800px) {

  .member-order-card {
    grid-template-columns:
      1fr auto;
  }


  .member-order-card > div:nth-child(2),
  .member-order-card > div:nth-child(3),
  .member-order-card > div:nth-child(4) {
    grid-column: 1;
  }


  .member-order-arrow {
    grid-column: 2;
    grid-row: 1 / span 4;

    align-self: center;
  }

}


@media (max-width: 550px) {

  .member-order-item {
    grid-template-columns:
      55px 1fr;
  }


  .member-order-item > img {
    width: 55px;
    height: 55px;
  }


  .member-order-item-total {
    grid-column: 2;
  }

}


/* =========================================================
   Admin – E-Mail-Historie
   ========================================================= */

.email-history {
  display: flex;
  flex-direction: column;
}


.email-history-entry {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 24px;

  padding: 16px 0;

  border-bottom:
    1px solid #eee;
}


.email-history-entry:last-child {
  border-bottom: 0;
}


.email-history-main {
  min-width: 0;
}


.email-history-title {
  display: flex;

  align-items: center;
  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 5px;
}


.email-history-subject {
  margin-bottom: 5px;

  color: var(--club-blue);
}


.email-status {
  display: inline-block;

  padding: 4px 8px;

  border-radius: 999px;

  font-size: 0.75rem;

  font-weight: 600;
}


.email-status-sent {
  background: #e3f5e8;
  color: #146b2e;
}


.email-status-failed {
  background: #ffe3e3;
  color: #8b2727;
}


.email-error-message {
  margin-top: 10px;

  padding: 10px 12px;

  background: #fff0f0;

  border-left:
    4px solid #8b2727;

  border-radius: 5px;

  color: #8b2727;

  font-size: 0.9rem;

  overflow-wrap: anywhere;
}


.email-history-date {
  flex-shrink: 0;

  white-space: nowrap;

  text-align: right;
}


@media (max-width: 700px) {

  .email-history-entry {
    flex-direction: column;

    gap: 8px;
  }


  .email-history-date {
    text-align: left;
  }

}


/* =========================================================
   Admin – E-Mail erneut senden
   ========================================================= */

.email-history-side {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 9px;

  flex-shrink: 0;
}


.email-resend-form {
  margin: 0;
}


body:not(.shop-body)
.email-resend-button {
  width: auto;

  padding: 7px 11px;

  background: var(--club-blue);

  color: #fff;

  border: 0;

  border-radius: 6px;

  font-size: 0.82rem;

  white-space: nowrap;
}


body:not(.shop-body)
.email-resend-button:hover {
  background: var(--club-blue-hover);

  color: #fff;
}


@media (max-width: 700px) {

  .email-history-side {
    align-items: flex-start;
  }

}


/* =========================================================
   Rückerstattungen
   ========================================================= */

.order-refund-pending {
  background: #fff0cf;
  color: #785500;
}


.order-refunded {
  background: #e7edf8;
  color: var(--club-blue);
}


.refund-card {
  border:
    1px solid
    rgba(39, 64, 139, 0.25);
}


.refund-status {
  margin-bottom: 16px;

  padding: 14px;

  border-radius: 8px;
}


.refund-status p {
  margin:
    8px 0 0;
}


.refund-status-pending {
  background: #fff0cf;
  color: #785500;
}


.refund-status-complete {
  background: #e7edf8;
  color: var(--club-blue);
}


/* =========================================================
   403 – Sicherheitsprüfung
   ========================================================= */

.security-error-card {
  padding: 45px 35px;

  background: #fff;

  border-radius: 14px;

  box-shadow:
    0 5px 24px
    rgba(0, 0, 0, 0.08);
}


.security-error-code {
  margin-bottom: 10px;

  color: var(--club-blue);

  font-size: 4rem;
  font-weight: 700;

  line-height: 1;
}


.security-error-card h1 {
  color: var(--club-blue);
}


/* =========================================================
   Lagerverwaltung
   ========================================================= */

.inventory-filter-form {
  display: grid;

  grid-template-columns:
    minmax(240px, 1fr)
    minmax(180px, 260px)
    auto
    auto;

  gap: 15px;

  align-items: end;
}


.inventory-filter-form label {
  margin: 0;
}


.inventory-stat-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 20px;

  margin-bottom: 24px;
}


.inventory-actions-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 24px;

  align-items: start;
}


.inventory-stock-empty {
  display: inline-block;

  min-width: 30px;

  padding: 4px 8px;

  border-radius: 999px;

  background: #ffe3e3;

  color: #8b2727;

  font-weight: 700;

  text-align: center;
}


.inventory-stock-low {
  display: inline-block;

  min-width: 30px;

  padding: 4px 8px;

  border-radius: 999px;

  background: #fff0cf;

  color: #785500;

  font-weight: 700;

  text-align: center;
}


.inventory-unlimited {
  color: var(--club-blue);

  font-size: 1.5rem;

  font-weight: 700;
}


.inventory-orderable {
  font-size: 1.1rem !important;
}


.inventory-positive {
  color: #146b2e !important;
}


.inventory-negative {
  color: #8b2727 !important;
}


@media (max-width: 850px) {

  .inventory-filter-form {
    grid-template-columns:
      1fr;
  }


  .inventory-stat-grid,
  .inventory-actions-grid {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   Dashboard – Bestandswarnungen
   ========================================================= */

.inventory-dashboard-warning {
  margin-bottom: 26px;

  padding: 20px;

  background: #fff;

  border:
    1px solid
    rgba(39, 64, 139, 0.18);

  border-radius: 12px;

  box-shadow:
    0 2px 10px
    rgba(0, 0, 0, 0.04);
}


.inventory-dashboard-warning-header {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 14px;
}


.inventory-dashboard-warning-header h2 {
  margin:
    0 0 4px;
}


.inventory-dashboard-warning-header p {
  margin: 0;
}


.inventory-warning-items {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 10px;
}


.inventory-warning-item {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 12px 14px;

  background: #f8f8f8;

  border-radius: 8px;

  text-decoration: none;
}


.inventory-warning-item:hover {
  background: #f1f3f8;
}


.inventory-result-limit {
  margin-top: 15px;

  text-align: right;
}


@media (max-width: 750px) {

  .inventory-dashboard-warning-header {
    flex-direction: column;
  }


  .inventory-warning-items {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   Fehlerseiten – 403 / 404
   ========================================================= */

.error-page-image,
.error-404-image,
.error-403-image {
  display: block;

  width: 100%;
  height: auto;

  max-width: 100%;
}


.error-page-container {
  width: min(
    100%,
    850px
  );

  margin: 0 auto;

  text-align: center;
}


.error-image-wrapper {
  overflow: hidden;

  background: #fff;

  border-radius: 16px;

  box-shadow:
    0 5px 24px
    rgba(0, 0, 0, 0.08);
}


@media (max-width: 600px) {

  .error-page-container {
    width: 100%;
  }


  .error-image-wrapper {
    border-radius: 10px;
  }

}


/* =========================================================
   Öffentlicher Shop
   ========================================================= */

.public-preview-banner {
  margin-bottom: 24px;

  padding: 13px 18px;

  background: #fff0cf;

  border-radius: 8px;

  color: #785500;
}


.public-preview-banner strong {
  margin-right: 8px;

  color: #785500 !important;
}


.public-shop-heading {
  margin-bottom: 25px;
}


.public-shop-heading h1 {
  margin-bottom: 6px;
}


.public-shop-heading p {
  margin-top: 0;

  color: #666;
}


.public-not-orderable {
  margin-top: 28px;

  padding: 17px;

  background: #f5f5f5;

  border-left:
    4px solid
    var(--club-blue);

  border-radius: 7px;
}


.public-not-orderable p {
  margin:
    7px 0 0;

  color: #666;
}


.product-option-field {
  display: block;

  margin-top: 18px;
}


.product-option-field select {
  display: block;

  width: 100%;

  margin-top: 6px;
}


.variant-available {
  color: #146b2e;
}


.variant-unavailable {
  color: #8b2727;
}


/* =========================================================
   Öffentlicher Shop – Produktbilder / Layout
   ========================================================= */


/* ---------- Produktübersicht ---------- */

.public-shop-body .product-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #fff;

  border-radius: 10px 10px 0 0;
}


.public-shop-body .product-card-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  padding: 12px;

  box-sizing: border-box;
}


/* Produktkarten insgesamt sauber begrenzen */

.public-shop-body .product-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(240px, 1fr)
    );

  gap: 24px;
}


.public-shop-body .product-card {
  overflow: hidden;

  background: #fff;

  border-radius: 10px;

  text-decoration: none;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.06);
}


.public-shop-body .product-card-content {
  padding: 18px;
}


/* ---------- Produktdetailseite ---------- */

.public-shop-body .product-detail-layout {
  display: grid;

  grid-template-columns:
    minmax(320px, 0.9fr)
    minmax(320px, 1.1fr);

  gap: 45px;

  align-items: start;

  margin-top: 25px;
}


.public-shop-body .product-gallery {
  width: 100%;
  min-width: 0;
}


.public-shop-body .product-main-image {
  width: 100%;
  max-width: 600px;
  height: auto;

  max-height: 600px;

  display: block;

  margin: 0 auto;

  object-fit: contain;

  background: #fff;

  border-radius: 12px;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.06);
}


/* Mehrere Produktbilder */

.public-shop-body .product-thumbnails {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 14px;
}


.public-shop-body .product-thumbnail {
  width: 72px;
  height: 72px;

  padding: 4px;

  overflow: hidden;

  background: #fff;

  border:
    1px solid #ddd;

  border-radius: 7px;

  cursor: pointer;
}


.public-shop-body .product-thumbnail img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
}


/* rechte Produktspalte */

.public-shop-body .product-detail-info {
  min-width: 0;
}


.public-shop-body .product-detail-info h1 {
  margin-top: 5px;
}


.public-shop-body .product-detail-price {
  margin: 22px 0 8px;

  font-size: 1.7rem;

  font-weight: 700;
}


/* ---------- Mobil ---------- */

@media (max-width: 800px) {

  .public-shop-body .product-detail-layout {
    grid-template-columns: 1fr;

    gap: 28px;
  }


  .public-shop-body .product-main-image {
    max-width: 500px;
    max-height: 500px;
  }

}


@media (max-width: 500px) {

  .public-shop-body .product-grid {
    grid-template-columns: 1fr;
  }


  .public-shop-body .product-main-image {
    max-height: 420px;
  }

}


/* =========================================================
   Admin – Öffentlicher Shop
   ========================================================= */

.public-shop-admin {
  max-width: 900px;
}


.public-shop-admin-card,
.public-shop-settings-link {
  margin-top: 25px;

  padding: 24px;

  background: #fff;

  border-radius: 10px;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.06);
}


.public-shop-admin-status {
  display: flex;

  align-items: flex-start;

  gap: 14px;

  margin-bottom: 24px;
}


.public-shop-admin-status p {
  margin:
    5px 0 0;

  color: #666;
}


.public-shop-status-dot {
  flex: 0 0 auto;

  width: 14px;
  height: 14px;

  margin-top: 5px;

  border-radius: 50%;
}


.public-shop-status-online {
  background: #238636;
}


.public-shop-status-offline {
  background: #777;
}


.public-shop-disable-button {
  background: #8b2727;
}


.public-shop-disable-button:hover {
  background: #6f1e1e;
}


/* =========================================================
   Öffentlicher Warenkorb
   ========================================================= */

.public-add-cart-form {
  display: flex;
  align-items: end;
  gap: 14px;
  flex-wrap: wrap;

  margin-top: 25px;
}


.public-add-cart-form label {
  max-width: 110px;
}


.public-add-cart-form input[type="number"] {
  width: 100%;
  margin-top: 6px;
}


.public-cart-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    320px;

  gap: 30px;

  align-items: start;
}


.public-cart-items {
  display: grid;
  gap: 16px;
}


.public-cart-item {
  display: grid;

  grid-template-columns:
    120px
    minmax(0, 1fr)
    130px;

  gap: 20px;

  padding: 18px;

  background: #fff;

  border-radius: 10px;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.06);
}


.public-cart-image {
  width: 120px;
  height: 120px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  background: #fff;
}


.public-cart-image img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


.public-cart-product-name {
  display: inline-block;

  margin-bottom: 7px;

  font-size: 1.15rem;
  font-weight: 700;

  color: var(--club-blue);

  text-decoration: none;
}


.public-cart-actions {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;

  margin-top: 16px;
}


.public-cart-quantity-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.public-cart-quantity-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.public-cart-quantity-form input[type="number"] {
  width: 80px;
}


.public-cart-remove {
  background: #777;
}


.public-cart-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 5px;

  text-align: right;
}


.public-cart-summary {
  position: sticky;
  top: 20px;

  padding: 22px;

  background: #fff;

  border-radius: 10px;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.06);
}


.public-cart-total {
  display: flex;
  justify-content: space-between;

  gap: 20px;

  margin:
    20px 0;

  padding-top: 16px;

  border-top:
    1px solid #ddd;

  font-size: 1.2rem;
}


.public-cart-summary button {
  width: 100%;

  margin-top: 12px;
}


.public-cart-checkout-note {
  margin-bottom: 0;

  text-align: center;

  font-size: 0.9rem;
}


.public-cart-empty {
  padding: 30px;

  background: #fff;

  border-radius: 10px;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.06);
}


@media (max-width: 850px) {

  .public-cart-layout {
    grid-template-columns: 1fr;
  }


  .public-cart-summary {
    position: static;
  }

}


@media (max-width: 600px) {

  .public-cart-item {
    grid-template-columns:
      90px
      minmax(0, 1fr);
  }


  .public-cart-image {
    width: 90px;
    height: 90px;
  }


  .public-cart-price {
    grid-column:
      1 / -1;

    align-items: flex-start;

    text-align: left;
  }


  .public-cart-quantity-form {
    align-items: flex-start;
    flex-direction: column;
  }

}


/* =========================================================
   Öffentlicher Gast-Checkout
   ========================================================= */

.public-checkout-button {
  display: block;

  width: 100%;

  box-sizing: border-box;

  margin-top: 12px;
  padding: 12px 16px;

  background: var(--club-blue);

  color: #fff !important;

  border-radius: 7px;

  text-align: center;
  text-decoration: none;
  font-weight: 700;
}


.public-checkout-button:hover {
  background: var(--club-blue-hover);
}


.public-checkout-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    340px;

  gap: 30px;

  align-items: start;
}


.public-checkout-main {
  display: grid;

  gap: 20px;
}


.public-checkout-card,
.public-confirmation-card {
  padding: 24px;

  background: #fff;

  border-radius: 10px;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.06);
}


.public-checkout-card h2,
.public-confirmation-card h2 {
  margin-top: 0;
}


.public-checkout-card label {
  display: block;

  margin-top: 16px;
}


.public-checkout-card input,
.public-checkout-card textarea {
  width: 100%;

  box-sizing: border-box;

  margin-top: 6px;
}


.public-checkout-name-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 16px;
}


.public-checkout-fixed-option {
  padding: 16px;

  background: #f6f6f6;

  border-radius: 8px;
}


.public-checkout-fixed-option p {
  margin:
    6px 0 0;

  color: #666;
}


.public-checkout-summary {
  position: sticky;

  top: 20px;

  padding: 24px;

  background: #fff;

  border-radius: 10px;

  box-shadow:
    0 2px 12px
    rgba(0, 0, 0, 0.06);
}


.public-checkout-summary h2 {
  margin-top: 0;
}


.public-checkout-item {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding:
    14px 0;

  border-bottom:
    1px solid #eee;
}


.public-checkout-item:last-child {
  border-bottom: 0;
}


.public-checkout-confirm {
  display: flex;

  gap: 10px;

  margin:
    22px 0;

  cursor: pointer;
}


.public-checkout-confirm input {
  flex:
    0 0 auto;

  width: auto;

  margin-top: 4px;
}


.public-order-submit {
  width: 100%;

  padding:
    14px 18px;

  font-size: 1rem;
  font-weight: 700;
}


.public-checkout-smallprint {
  margin-bottom: 0;

  text-align: center;

  font-size: 0.85rem;
}


.public-checkout-error {
  margin-bottom: 20px;

  padding: 14px 18px;

  background: #fbeaea;

  border-left:
    4px solid #8b2727;

  border-radius: 7px;

  color: #711d1d;
}


.public-checkout-notice {
  margin-bottom: 22px;

  padding: 17px;

  background: #fff0cf;

  border-radius: 8px;

  color: #654900;
}


.public-checkout-notice p {
  margin:
    6px 0 0;
}


.public-confirmation {
  max-width: 900px;
}


.public-confirmation-card {
  margin-bottom: 22px;
}


.public-order-number {
  display: flex;
  flex-direction: column;

  gap: 5px;

  margin:
    22px 0;

  padding: 18px;

  background: #f5f5f5;

  border-radius: 8px;
}


.public-order-number strong {
  font-size: 1.5rem;

  color: var(--club-blue);
}


.public-confirmation-total {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  margin-top: 18px;

  padding-top: 18px;

  border-top:
    2px solid #ddd;

  font-size: 1.2rem;
}


.public-bank-data {
  display: grid;

  gap: 12px;
}


.public-bank-data > div {
  display: grid;

  grid-template-columns:
    170px
    minmax(0, 1fr);

  gap: 15px;
}


.public-bank-data span {
  color: #666;
}


@media (max-width: 850px) {

  .public-checkout-layout {
    grid-template-columns: 1fr;
  }


  .public-checkout-summary {
    position: static;
  }

}


@media (max-width: 600px) {

  .public-checkout-name-grid {
    grid-template-columns: 1fr;
  }


  .public-checkout-item {
    flex-direction: column;

    gap: 7px;
  }


  .public-bank-data > div {
    grid-template-columns: 1fr;

    gap: 3px;
  }

}


/* =========================================================
   Admin – Verkaufskanäle
   ========================================================= */

.admin-order-filter-block {
  margin-bottom: 24px;
}


.admin-filter-label {
  margin:
    14px 0 7px;

  font-size: 0.85rem;
  font-weight: 700;

  color: #666;
}


.order-channel-badge {
  display: inline-block;

  padding:
    5px 9px;

  border-radius: 999px;

  font-size: 0.8rem;
  font-weight: 700;

  white-space: nowrap;
}


.order-channel-members {
  background: #e8eefc;

  color: #27408b;
}


.order-channel-public {
  background: #fff1cf;

  color: #765400;
}


/* =========================================================
   Rechtliche Inhalte
   ========================================================= */

.legal-admin {
  max-width: 1000px;
}


.legal-admin textarea {
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
}


.legal-ready {
  margin: 20px 0;
  padding: 14px 18px;
  border-radius: 8px;
  font-weight: 700;
}


.legal-ready-ok {
  background: #e9f6eb;
  color: #245b2b;
}


.legal-ready-warning {
  background: #fff1cf;
  color: #765400;
}


.public-legal-page {
  max-width: 900px;
}


.public-legal-text {
  padding: 25px;
  background: #fff;
  border-radius: 10px;
  white-space: pre-wrap;
  line-height: 1.6;
}


.public-legal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;

  max-width: 1200px;

  margin: 35px auto 0;
  padding: 24px 18px;

  border-top: 1px solid #ddd;
}


.public-legal-footer a {
  color: #555;
}


.public-legal-footer .public-withdraw-link {
  font-weight: 700;
  color: #27408b;
}


/* =========================================================
   Widerruf
   ========================================================= */

.public-withdraw-page {
  max-width: 820px;
}


.public-withdraw-form {
  margin-top: 24px;
}


.public-withdraw-form label {
  display: block;
  margin-bottom: 18px;
}


.public-withdraw-form input[type="text"],
.public-withdraw-form input[type="email"],
.public-withdraw-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
}


.public-price-notice {
  margin: 18px 0;
  padding: 14px;

  background: #f5f5f5;

  border-radius: 8px;

  font-size: 0.9rem;
}


.public-privacy-reference {
  font-size: 0.88rem;
  color: #666;
}


.withdrawal-admin-list {
  display: grid;
  gap: 18px;
}


.withdrawal-admin-card {
  margin: 0;
}


.withdrawal-admin-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
}


.withdrawal-message {
  padding: 14px;

  background: #f5f5f5;

  border-radius: 8px;

  white-space: pre-wrap;
}


/* =========================================================
   Widerruf → Bestellung
   ========================================================= */

.withdrawal-order-box {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin: 18px 0;
  padding: 16px;

  background: #f5f5f5;

  border-radius: 8px;
}


.withdrawal-order-number {
  margin-top: 5px;

  font-size: 1.1rem;
  font-weight: 700;

  color: #27408b;
}


.withdrawal-order-status {
  margin-top: 7px;

  text-align: right;
}


.withdrawal-order-actions {
  display: grid;

  gap: 12px;

  margin-bottom: 18px;
}


.withdrawal-order-open {
  display: inline-block;

  width: fit-content;

  font-weight: 700;
}


.withdrawal-order-actions form {
  margin: 0;
}


@media (max-width: 650px) {

  .withdrawal-order-box {
    flex-direction: column;
  }


  .withdrawal-order-status {
    text-align: left;
  }

}


/* =========================================================
   Bestelldetail – Widerruf
   ========================================================= */

.admin-order-withdrawal-section {
  margin-bottom: 24px;
}


.admin-order-withdrawal-heading {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;
}


.admin-order-withdrawal-heading h2 {
  margin-top: 0;
}


.admin-order-withdrawal-entry {
  margin-top: 18px;

  padding: 18px;

  border-radius: 9px;

  border: 1px solid #ddd;
}


.admin-order-withdrawal-open {
  border-left: 5px solid #b37a00;

  background: #fffaf0;
}


.admin-order-withdrawal-processed {
  border-left: 5px solid #3d7b43;

  background: #f7fbf7;
}


.admin-order-withdrawal-entry-head {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;

  gap: 15px;
}


.admin-order-withdrawal-customer {
  margin-top: 16px;
}


.admin-order-withdrawal-message {
  margin: 16px 0;

  padding: 13px;

  background: rgba(0, 0, 0, 0.035);

  border-radius: 7px;

  white-space: pre-wrap;
}


.admin-order-withdrawal-message > div {
  margin-top: 7px;
}


.admin-order-withdrawal-link {
  display: inline-block;

  margin-top: 10px;

  font-weight: 700;
}


.withdrawal-admin-card {
  scroll-margin-top: 20px;
}


.withdrawal-admin-card:target {
  outline: 3px solid rgba(39, 64, 139, 0.25);

  outline-offset: 4px;
}


@media (max-width: 650px) {

  .admin-order-withdrawal-heading,
  .admin-order-withdrawal-entry-head {
    flex-direction: column;
  }

}


/* =========================================================
   Admin Dashboard – Vorgänge
   ========================================================= */

.dashboard-grid-workflow {
  margin-bottom: 32px;
}


.stat-card-link {
  display: flex;
  flex-direction: column;

  text-decoration: none;

  color: inherit;

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}


.stat-card-link:hover {
  transform: translateY(-2px);

  box-shadow:
    0 5px 18px
    rgba(0, 0, 0, 0.1);
}


.stat-card-link strong {
  font-size: 2rem;
}


.stat-card-link small {
  margin-top: 6px;

  color: #666;

  font-size: 0.8rem;
}


.stat-card-attention {
  border-left: 5px solid #b37a00;
}


.stat-card-active {
  border-left: 5px solid #27408b;
}


.stat-card-critical {
  border-left: 5px solid #9b2c2c;
}


.stat-card-critical strong {
  color: #8b2727;
}


.stat-card-attention strong {
  color: #765400;
}


/* =========================================================
   Bestellfilter
   ========================================================= */

.order-filter-panel {
  margin: 22px 0 26px;

  padding: 16px 18px;

  background: #fff;

  border-radius: 10px;

  box-shadow:
    0 2px 10px
    rgba(0, 0, 0, 0.05);
}


.order-filter-row {
  display: flex;

  align-items: flex-start;

  gap: 16px;

  padding: 9px 0;
}


.order-filter-row + .order-filter-row {
  border-top:
    1px solid #eee;
}


.order-filter-label {
  flex: 0 0 105px;

  padding-top: 6px;

  font-size: 0.88rem;
}


.order-filter-row .admin-filter {
  flex: 1;

  margin: 0;
}


@media (max-width: 750px) {

  .order-filter-row {
    flex-direction: column;

    gap: 6px;
  }


  .order-filter-label {
    flex-basis: auto;
  }

}


/* =========================================================
   Fehlerseite 500
   ========================================================= */

.error-page-body {
  margin: 0;
  min-height: 100vh;
  background: #f4f5f7;
}


.error-page {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  padding: 30px 18px;
}


.error-card {
  width: 100%;
  max-width: 650px;

  box-sizing: border-box;

  padding: 42px 34px;

  text-align: center;

  background: #fff;

  border-radius: 14px;

  box-shadow:
    0 4px 24px
    rgba(0, 0, 0, 0.08);
}


.error-code {
  margin-bottom: 10px;

  color: #27408b;

  font-size: 4rem;
  font-weight: 800;

  line-height: 1;
}


.error-card h1 {
  margin: 0 0 18px;
}


.error-card p {
  line-height: 1.6;
}


.error-actions {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;

  margin-top: 28px;
}


.error-back-button {
  padding: 10px 18px;
}


@media (max-width: 550px) {

  .error-card {
    padding: 32px 20px;
  }


  .error-code {
    font-size: 3.2rem;
  }

}


/* =========================================================
   Fehlerseiten – Illustration
   ========================================================= */

.error-page-image {
  display: block;

  width: 100%;
  max-width: 520px;

  height: auto;

  margin: 0 auto 24px;

  border-radius: 10px;
}



/* =========================================================
   Produktbilder – Sortierung
   ========================================================= */

.product-image-position {
  margin-top: 10px;

  text-align: center;

  color: #666;

  font-size: 0.85rem;
}


.product-image-sort-actions {
  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 10px;
}


.product-image-sort-actions form {
  margin: 0;
}


.image-sort-button {
  min-width: 44px;

  padding:
    7px 13px;

  font-size: 1.2rem;
  font-weight: 700;

  line-height: 1;
}


.image-sort-button:disabled {
  opacity: 0.3;

  cursor: not-allowed;
}


.product-image-actions {
  margin-top: 12px;
}


.product-image-actions form {
  margin: 0;
}


.image-delete-button {
  background: #8b2727;
}


.image-delete-button:hover {
  background: #6f1e1e;
}


/* =========================================================
   Variantenpreise
   ========================================================= */

.variant-price-input {
  min-width: 135px;
  max-width: 170px;
}


.variant-price-input:disabled {
  opacity: 0.55;

  background: #eee;

  cursor: not-allowed;
}



/* =========================================================
   Public Widerruf V2
   ========================================================= */

.public-withdraw-page {
  max-width: 780px;
}

.withdrawal-step-notice,
.withdrawal-review-warning,
.withdrawal-mail-ok {
  margin: 20px 0;
  padding: 16px;
  border-radius: 8px;
  background: #eef2ff;
}

.withdrawal-step-notice p,
.withdrawal-review-warning p {
  margin-bottom: 0;
}

.withdrawal-review-data {
  display: grid;
  grid-template-columns:
    minmax(140px, 190px)
    1fr;
  gap: 12px 20px;
  margin: 24px 0;
}

.withdrawal-review-data dt {
  font-weight: 600;
}

.withdrawal-review-data dd {
  margin: 0;
}

.withdrawal-message {
  white-space: pre-wrap;
}

.withdraw-confirm-button {
  width: 100%;
  margin-top: 10px;
  font-weight: 700;
}

.withdrawal-success {
  margin-bottom: 24px;
}

@media (max-width: 650px) {

  .withdrawal-review-data {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .withdrawal-review-data dd {
    margin-bottom: 14px;
  }
}


/* ============================================================
   PUBLIC SHOP – MITGLIEDERBEREICH
   ============================================================ */

.shop-nav .shop-member-button {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border: 1px solid currentColor;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
}

.shop-nav .shop-member-button:hover {
  opacity: 0.8;
}


/* ============================================================
   PUBLIC SHOP – WARENKORB-BUTTON AUSRICHTUNG
   ============================================================ */

.public-add-cart-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.public-add-cart-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.public-add-cart-form button {
  margin: 0;
}


/* Nextcloud SSO */

.sso-login-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  background: var(--club-blue);
  color: #fff;
}

.sso-login-button:hover {
  background: var(--club-blue-hover);
  color: #fff;
  text-decoration: none;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d8d8d8;
}

.login-divider span {
  white-space: nowrap;
  font-size: 0.9rem;
  opacity: 0.7;
}


/* FunkenCloud SSO-Button */
.login-card .sso-login-button,
.login-card .sso-login-button:link,
.login-card .sso-login-button:visited,
.login-card .sso-login-button:hover,
.login-card .sso-login-button:active {
  background: var(--club-blue);
  color: #fff !important;
  text-decoration: none;
}

.login-card .sso-login-button:hover {
  background: var(--club-blue-hover);
}

/* Lokaler Login – gleiche Schrift wie FunkenCloud-Button */
.login-card button[type="submit"] {
  font-weight: 600;
}

/* Vereinslogo auf der Login-Seite */
.login-logo {
  display: block;
  width: auto;
  max-width: 180px;
  max-height: 160px;
  margin: 0 auto 1rem auto;
  object-fit: contain;
}


/* =========================================================
   Login-Layout wie FunkenInventar
   Farben bleiben unverändert
   ========================================================= */

.login-page .login-card {
  max-width: 420px;
}

/* Logo mittig */
.login-page .login-logo {
  display: block;
  width: auto;
  max-width: 170px;
  max-height: 170px;
  margin: 0 auto 1.5rem auto;
}

/* Überschrift mittig wie in der Inventarverwaltung */
.login-page .login-card h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* Untertitel mittig */
.login-page .login-card > .muted {
  text-align: center;
  margin-top: 0;
  margin-bottom: 1.75rem;
}

/* SSO-Button und lokaler Button gleiche Abmessungen */
.login-page .sso-login-button,
.login-page form[action="/login"] button[type="submit"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Formularfelder ebenfalls über die volle Formularbreite */
.login-page form[action="/login"] input {
  width: 100%;
  box-sizing: border-box;
}

/* Untertitel der Loginseite größer */
.login-page .login-card > .muted {
  font-size: 1.5em;
}