:root {
  --wedding-bg: #1D2532;
  --wedding-panel: #323C60;
  --wedding-panel-2: #2E4240;
  --wedding-accent: #52726D;
  --wedding-silver: #7F7F7F;
  --wedding-text: #F2F4F5;
  --wedding-muted: #C8CDD2;

  --bs-primary: #52726D !important;
  --bs-primary-rgb: 82, 114, 109 !important;
  --bs-secondary: #7F7F7F !important;
  --bs-secondary-rgb: 127, 127, 127 !important;
  --bs-link-color: #B7C7C4 !important;
  --bs-link-hover-color: #D6D8DA !important;
  --bs-body-bg: #1D2532 !important;
  --bs-body-color: #D6D8DA !important;
}

body,
#main-wrapper,
#main-content {
  background: var(--wedding-bg) !important;
  color: var(--wedding-text) !important;
}

/* Navbar */
.navbar {
  background: var(--wedding-panel) !important;
  border-bottom: 1px solid rgba(127,127,127,.35) !important;
}

.navbar-title,
.navbar-brand,
.navbar a {
  color: var(--wedding-text) !important;
}

.navbar i,
.navbar svg,
.navbar .fa,
.navbar-options i {
  color: #B7C7C4 !important;
}

/* Header-Logo per Theme */
.navbar-brand {
  position: relative !important;
}

.navbar-logo {
  opacity: 0 !important;
  width: 42px !important;
  height: 42px !important;
}

.navbar-brand::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 42px !important;
  height: 42px !important;
  transform: translateY(-50%) !important;
  background-image: url("/images/Logo.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 10px !important;
}

/* Grundelemente */
.card,
.modal-content,
.dropdown-menu {
  background: var(--wedding-panel-2) !important;
  color: var(--wedding-text) !important;
  border: 1px solid rgba(127,127,127,.35) !important;
  border-radius: 18px !important;
}

.card {
  max-width: 920px;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
}

.card-header {
  background: var(--wedding-panel) !important;
  color: var(--wedding-text) !important;
  border-bottom: 1px solid rgba(127,127,127,.35) !important;
}

.card-body {
  padding: 2.2rem 3rem !important;
}

/* Texte */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6,
.text-primary,
.text-secondary,
.text-info,
.link-primary,
.link-secondary,
.card-header,
.card-header *,
.fa,
.fas,
.far,
.fa-solid,
.fa-regular {
  color: #C8CDD2 !important;
}

#main-content h1,
#main-content .display-6 {
  color: #D6D8DA !important;
  letter-spacing: 0.02em;
}

a,
a:hover,
.text-link,
.text-link:hover {
  color: #B7C7C4 !important;
}

.form-text,
.text-muted,
small {
  color: var(--wedding-muted) !important;
}

/* Formulare */
.form-control,
.form-select,
textarea {
  background: #202A38 !important;
  color: var(--wedding-text) !important;
  border: 1px solid rgba(127,127,127,.55) !important;
  border-radius: 12px !important;
  min-height: 42px !important;
  font-size: 1rem !important;
}

.form-control::placeholder {
  color: var(--wedding-muted) !important;
}

/* Buttons */
.btn,
.btn-primary,
.btn-primary-2,
button {
  background: var(--wedding-accent) !important;
  border-color: var(--wedding-accent) !important;
  color: #F2F4F5 !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
}

.btn:hover,
.btn-primary:hover,
.btn-primary-2:hover,
button:hover {
  background: #638883 !important;
  border-color: #638883 !important;
  color: #FFFFFF !important;
}

/* Uploadfeld */
.upload_drop {
  background: rgba(46, 66, 64, 0.32) !important;
  border: 2px dashed #7F7F7F !important;
  outline: 2px dashed rgba(127, 127, 127, 0.55) !important;
  outline-offset: 8px !important;
  border-radius: 20px !important;
  color: #D6D8DA !important;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18) !important;
}

.upload_drop:hover {
  background: rgba(46, 66, 64, 0.48) !important;
  border-color: #C8CDD2 !important;
  outline-color: rgba(200, 205, 210, 0.65) !important;
}

.upload_drop *,
.upload_drop h2,
.upload_drop p,
.upload_drop small {
  color: #D6D8DA !important;
}

.upload_svg,
.upload_svg *,
.upload_drop svg,
.upload_drop svg *,
.upload_drop use {
  color: #C8CDD2 !important;
  fill: #C8CDD2 !important;
  stroke: #C8CDD2 !important;
}

.upload_drop h2 {
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
}

/* Galerie-Bilder ohne Ranken */
#main_gallery .image-tile img {
  display: block !important;
  width: 100% !important;
  border-radius: 12px !important;
  border: 1px solid rgba(127, 127, 127, 0.45) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28) !important;
}

#main_gallery .image-tile {
  transition: transform 0.18s ease, filter 0.18s ease !important;
}

#main_gallery .image-tile:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) !important;
}

/* Wichtig: alte Ranken/Debug-Pseudo-Elemente sicher deaktivieren */
#main_gallery .image-tile::before,
#main_gallery .image-tile::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

/* Daumen hoch zu Herz */
.fa-thumbs-up::before,
.fa-regular.fa-thumbs-up::before,
.fa-solid.fa-thumbs-up::before {
  content: "\f004" !important;
}

/* QR */
img[src*="qr"],
.qr-code,
[class*="qr"],
[class*="Qr"],
[class*="QR"] {
  border-radius: 8px;
}

/* Footer */
footer {
  background: var(--wedding-bg) !important;
  border-top: 1px solid rgba(127,127,127,.25) !important;
}

footer i,
footer a {
  color: #7F7F7F !important;
}

/* Mobile */
@media (max-width: 768px) {
  body {
    font-size: 16px !important;
  }

  #main-content {
    padding-top: 1rem !important;
  }

  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    max-width: 100% !important;
  }

  .card {
    max-width: 100% !important;
    border-radius: 14px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 18px !important;
  }

  .card-body {
    padding: 1.4rem !important;
  }

  .display-6,
  h1 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
  }

  .btn {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 1rem !important;
  }

  .navbar-title {
    font-size: 1rem !important;
  }

  .navbar-logo {
    width: 44px !important;
    height: 44px !important;
  }

  .upload_drop {
    min-height: 140px !important;
  }
}

#main_gallery .image-tile {
  border-radius: 16px !important;
  overflow: visible !important;
}

#main_gallery .media-viewer-item {
  display: block !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(127, 127, 127, 0.45) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28) !important;
}

#main_gallery .media-viewer-item img,
#main_gallery img.w-100.shadow-1.strong {
  display: block !important;
  width: 100% !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: inset(0 round 16px) !important;
}

/* Final – Vorschaubilder abrunden */

#main_gallery .image-tile {
  border-radius: 16px !important;
  overflow: visible !important;
}

#main_gallery .media-viewer-item {
  display: block !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(127, 127, 127, 0.45) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28) !important;
}

#main_gallery .media-viewer-item img,
#main_gallery img.w-100.shadow-1.strong {
  display: block !important;
  width: 100% !important;
  border-radius: 16px !important;
  clip-path: inset(0 round 16px) !important;
}

/* Final – QR-Seitenleiste auf Handy ausblenden */

@media (max-width: 768px) {
  .row:has(#main_gallery) > .col-12.col-lg-2 {
    display: none !important;
  }

  .row:has(#main_gallery) > #main_gallery {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Final – QR-Seitenleiste nach Galerie-Auswahl ausblenden */

#main_gallery + .col-12.col-lg-2 {
  display: none !important;
}

/* Galerie breiter machen, wenn rechte QR-Spalte weg ist */
#main_gallery {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}