/* === Rosen-Branding (Bootstrap-kompatibel, kein Blau mehr) === */
:root {
  --brand:        #8B1E3F; /* Hauptfarbe – dunkles Rosenrot */
  --brand-hover:  #A52A4F; /* Hover-Farbe – heller */
  --brand-active: #6E122E; /* Active-Farbe – dunkler */
  --brand-rgb:    139, 30, 63;

  /* Bootstrap-Farbvariablen neu belegen */
  --bs-primary:              var(--brand);
  --bs-primary-rgb:          var(--brand-rgb);
  --bs-btn-bg:               var(--brand);
  --bs-btn-border-color:     var(--brand);
  --bs-btn-hover-bg:         var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg:        var(--brand-active);
  --bs-btn-active-border-color: var(--brand-active);
  --bs-btn-disabled-bg:      #b67b8b;
  --bs-btn-disabled-border-color: #b67b8b;
  --bs-link-color:           var(--brand);
  --bs-link-hover-color:     var(--brand-hover);
}

/* Globale Button-Schriftgröße anpassen */
.btn {
  font-size: 0.9rem; /* Standard: 1rem, etwas kleiner */
  font-weight: 500;  /* optional: etwas leichter */
  letter-spacing: 0.3px; /* optisch feiner */
}


/* === Button Primary === */
.btn-primary {
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  font-size: normal;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--brand-active) !important;
  border-color: var(--brand-active) !important;
  color: #fff !important;
}

/* === Outlined Primary === */
.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
  background-color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background-color: var(--brand-hover);
  border-color: var(--brand-hover);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
  color: #fff !important;
  background-color: var(--brand-active) !important;
  border-color: var(--brand-active) !important;
}

/* === Kein Box-Shadow oder Outline beim Fokussieren === */
.btn:focus,
.btn:active,
.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
  box-shadow: none !important;
  outline: none !important;
}


/* === Secondary Button – warmes, rötliches Grau === */
:root {
  --brand-secondary:        #c8b8b3; /* Hauptfarbe – helles Rosen-Grau */
  --brand-secondary-hover:  #b5a5a0; /* Hover – etwas dunkler */
  --brand-secondary-active: #9f8f8a; /* Active – satter, aber dezent */
}

/* Gefüllter Button */
.btn-secondary {
  background-color: var(--brand-secondary);
  border-color: var(--brand-secondary);
  color: #222;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--brand-secondary-hover);
  border-color: var(--brand-secondary-hover);
  color: #000;
}

.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--brand-secondary-active) !important;
  border-color: var(--brand-secondary-active) !important;
  color: #fff !important;
}

/* Outline-Variante */
.btn-outline-secondary {
  color: var(--brand-secondary-active);
  border-color: var(--brand-secondary);
  background-color: transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: #fff;
  background-color: var(--brand-secondary-hover);
  border-color: var(--brand-secondary-hover);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle {
  color: #fff !important;
  background-color: var(--brand-secondary-active) !important;
  border-color: var(--brand-secondary-active) !important;
}


/* === Einladender Button – frisches Rosengrün (Stil einer jungen Rose) === */
.btn-invite {
  background-color: #6f9e3b;  /* Hauptfarbe – natürliches Rosengrün */
  border-color: #6f9e3b;
  color: #fff;
  font-weight: 600;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.1s ease;
}

.btn-invite:hover,
.btn-invite:focus {
  background-color: #81b543; /* Hover – helleres, lebendiges Blattgrün */
  border-color: #81b543;
  color: #fff;
  transform: scale(1.03); /* leichtes Anheben beim Hover */
}

.btn-invite:active,
.btn-invite.active,
.show > .btn-invite.dropdown-toggle {
  background-color: #588d2e !important; /* dunklerer Stängelton */
  border-color: #588d2e !important;
  color: #fff !important;
  transform: scale(0.98); /* dezentes Klickfeedback */
}

.alert-rose {
  background-color: rgba(var(--brand-rgb), 0.1);
  border: 1px solid var(--brand);
  color: var(--brand-active);
}

.alert-rosegreen {
  --bs-alert-bg: #e8f3ea;       /* sanftes Grün, sehr hell */
  --bs-alert-border-color: #c8dfcc;
  --bs-alert-color: #305a38;    /* dunkles, edles Grün für Text */
  background-color: var(--bs-alert-bg);
  border: 1px solid var(--bs-alert-border-color);
  color: var(--bs-alert-color);
}

/* Verhindert, dass Flex-Items wegen Inhalt über den Rand schieben */
.btnbar .btn { 
  min-width: 0;
  white-space: normal; /* Text darf umbrechen */
}

/* XS/kleine Geräte: Buttons untereinander, volle Breite */
@media (max-width: 575.98px) {
  .btnbar { gap: .5rem; }
  .btnbar .btn { flex: 1 1 100%; } /* volle Zeilenbreite je Button */
}

/* ==== Rosen-Design Checkboxen ==== */
.form-check-input {
  width: 1.3em;
  height: 1.3em;
  border: 2px solid #b45a74;   /* dezenter Rosenton für uncheck */
  border-radius: 0.25rem;
  background-color: #fff;
  accent-color: #8B1E3F;       /* moderner Standardweg */
  transition: all 0.2s ease-in-out;
}

/* Deutlicher roter Rand für nicht gesetzte Haken */
.form-check-input:not(:checked) {
  border-color: #8B1E3F;
  box-shadow: inset 0 0 0 1px rgba(139, 30, 63, 0.5);
}

/* Wenn aktiv: kräftiges Rosenrot mit weißem Haken */
.form-check-input:checked {
  background-color: #8B1E3F;
  border-color: #8B1E3F;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='white' d='M16.7 5.3a1 1 0 0 0-1.4 0L8 12.6 4.7 9.3a1 1 0 1 0-1.4 1.4l4 4a1 1 0 0 0 1.4 0l8-8a1 1 0 0 0 0-1.4z'/%3E%3C/svg%3E");
  background-size: 80% 80%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fokus- oder Hover-Zustand */
.form-check-input:focus,
.form-check-input:hover {
  outline: none;
  border-color: #8B1E3F;
  box-shadow: 0 0 0 0.25rem rgba(139, 30, 63, 0.25);
}

/* Optional: etwas stärkerer Rand generell */
.form-check-input {
  border-width: 2px;
}

/* ==========================================================================
   Fotobox-Panel auf der Startseite (Fotos & Videos der Gäste)
   Ein leicht gedrehtes Polaroid mit goldenem Rahmen und vier Bildfeldern,
   daneben Text + Button. Auf schmalen Bildschirmen untereinander.
   ========================================================================== */
.fotobox-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 2.5rem;
  margin: 1.5rem 0 1rem;
}
.fotobox-text {
  flex: 1 1 18rem;
  max-width: 34rem;
  text-align: center;
}

/* Polaroid */
.fotobox {
  flex: 0 0 auto;
  width: min(100%, 19rem);
  display: block;
  background: #fffdf8;
  padding: .7rem .7rem 2.6rem;
  border-radius: .2rem;
  box-shadow: 0 10px 25px rgba(60, 20, 30, .25), 0 2px 6px rgba(0, 0, 0, .12);
  transform: rotate(-3deg);
  transition: transform .25s ease, box-shadow .25s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.fotobox:hover,
.fotobox:focus-visible {
  transform: rotate(0deg) scale(1.03);
  box-shadow: 0 16px 32px rgba(60, 20, 30, .3), 0 3px 8px rgba(0, 0, 0, .15);
  outline: none;
}
/* Klebestreifen oben */
.fotobox::before {
  content: "";
  position: absolute;
  top: -.7rem;
  left: 50%;
  width: 5.5rem;
  height: 1.4rem;
  transform: translateX(-50%) rotate(2deg);
  background: rgba(255, 246, 214, .75);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}

/* Goldener Rahmen mit vier Bildfeldern (wie die Fotobox-Vorlage) */
.fotobox-frame {
  position: relative;
  padding: .5rem;
  background:
    linear-gradient(135deg, #b98a2e 0%, #e9cf78 22%, #a9781f 45%, #f1dc8f 68%, #b28429 88%, #d9b95a 100%);
  box-shadow: inset 0 0 6px rgba(80, 50, 0, .45);
}
.fotobox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem;
  aspect-ratio: 3 / 2;
}
.fotobox-slot {
  background: linear-gradient(160deg, #b7bcc4, #9ea4ad);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.fotobox-slot span  { font-size: 1.7rem; line-height: 1; }
.fotobox-slot small { font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }

/* Rosen in den Ecken des Rahmens */
.fotobox-rose {
  position: absolute;
  font-size: 1.5rem;
  line-height: 1;
  z-index: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4));
}
.fotobox-rose-tl { top: -.55rem; left: -.55rem; transform: rotate(-25deg); }
.fotobox-rose-br { right: -.55rem; bottom: -.55rem; transform: rotate(155deg); }

/* Handschriftliche Bildunterschrift */
.fotobox-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: .35rem;
  text-align: center;
  font-family: 'Great Vibes', cursive;
  font-size: 1.65rem;
  line-height: 1.2;
  color: var(--brand);
}

/* Countdown-Variante (partials/upload_countdown.php): kein Link, keine Hover-Bewegung,
   in den vier Bildfeldern stehen Tage/Stunden/Minuten/Sekunden. */
.fotobox-static { cursor: default; }
.fotobox-static:hover,
.fotobox-static:focus-visible {
  transform: rotate(-3deg);
  box-shadow: 0 10px 25px rgba(60, 20, 30, .25), 0 2px 6px rgba(0, 0, 0, .12);
}
.fotobox-grid-countdown .fotobox-slot span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
  .fotobox { width: min(100%, 16rem); margin-top: .5rem; }
  .fotobox-panel { gap: 1.75rem; }
  .fotobox-grid-countdown .fotobox-slot span { font-size: 1.7rem; }
}

/* ==========================================================================
   Menü-Panel auf der Startseite (Getränke & Speisen)
   Nutzt das Layout des Fotobox-Panels (.fotobox-panel / .fotobox-text).
   Links zwei leicht gefächerte Kärtchen (Getränkekarte, Speisekarte) auf
   cremefarbenem Papier mit Rosenrand, daneben Text + zwei Buttons.
   ========================================================================== */
.menuekarten {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: .8rem .6rem .4rem;
}

.menuekarte {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 9.5rem;
  min-height: 12.5rem;
  padding: .9rem .7rem .8rem;
  background: #fffdf8;
  border: 1px solid rgba(139, 30, 63, .35);
  outline: 1px solid rgba(139, 30, 63, .35);
  outline-offset: -.35rem;
  border-radius: .2rem;
  box-shadow: 0 10px 25px rgba(60, 20, 30, .25), 0 2px 6px rgba(0, 0, 0, .12);
  text-decoration: none;
  color: #222;
  transition: transform .25s ease, box-shadow .25s ease;
}
.menuekarte-getraenke { transform: rotate(-7deg) translateY(-.4rem); z-index: 1; }
.menuekarte-speisen   { transform: rotate(5deg); margin-left: -1.6rem; }

.menuekarte:hover,
.menuekarte:focus-visible {
  transform: rotate(0deg) scale(1.05);
  box-shadow: 0 16px 32px rgba(60, 20, 30, .3), 0 3px 8px rgba(0, 0, 0, .15);
  outline-color: rgba(139, 30, 63, .35);
  z-index: 2;
}

.menuekarte-ueber {
  font-size: .5rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-top: .3rem;
}
.menuekarte-titel {
  font-family: 'Great Vibes', cursive;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--brand);
  margin: .15rem 0 .35rem;
  white-space: nowrap;
}
.menuekarte-icon {
  font-size: 2.1rem;
  line-height: 1;
  margin: .1rem 0 .55rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .2));
}
/* Angedeutete Textzeilen wie auf einer echten Karte */
.menuekarte-zeilen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .32rem;
  width: 100%;
}
.menuekarte-zeilen i {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: rgba(139, 30, 63, .28);
}
.menuekarte-zeilen i:nth-child(1) { width: 62%; }
.menuekarte-zeilen i:nth-child(2) { width: 78%; }
.menuekarte-zeilen i:nth-child(3) { width: 56%; }
.menuekarte-zeilen i:nth-child(4) { width: 70%; }

.menue-panel .fotobox-text .btn + .btn { margin-left: .5rem; }

@media (max-width: 575.98px) {
  .menuekarte { width: 8.5rem; min-height: 11rem; }
  .menue-panel .fotobox-text .btn { margin-bottom: .5rem; }
  .menue-panel .fotobox-text .btn + .btn { margin-left: 0; }
}