/* =========================================================
   Aidshilfe Köln – Spendenkalender Stylesheet
   Vereinheitlicht, strukturiert, doppelte Regeln bereinigt
   ========================================================= */

/* ---------------------------
   Root Variablen
--------------------------- */
:root {
  /* Markenfarben */
  --aidshilfe-rot: #e30613;
  --aidshilfe-dark: #65000b;

  /* Glas/Blur */
  --glass-bg: rgba(255, 255, 255, 0.041);
  --glass-white: rgba(255, 255, 255, 0.247);
  --glass-red: rgba(227, 6, 19, 0.19);
  --glass-blur: 17px;

  /* Goldtöne (statisch) */
  --gold-1: #ffe082;
  --gold-2: #e1bb4b;
  --gold-3: #c3a035;
  --gold-4: #9b7b1c;

  /* Abstände & Radien */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;

  /* Buttons (Rot-Look) */
  --btn-grad-1: #98121f;
  --btn-grad-2: #4c0910;
  --btn-hover-1: #a51422;
  --btn-hover-2: #5a0a12;
  --btn-border: rgba(255, 255, 255, 0.18);
  --btn-shadow: 0 10px 28px rgba(152, 18, 31, 0.35);
  --btn-hover-shadow: 0 14px 36px rgba(152, 18, 31, 0.42);
}

/* ---------------------------
   Grundlayout & Hintergrund
--------------------------- */
html {
  overflow-x: hidden;
  background: #23060c; /* kann bleiben, sieht man unter unserem Layer eh kaum */
}

body {
  margin: 0;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  min-height: 100vh;
  position: relative;
  scrollbar-gutter: stable;
}

h1, h2, h3, h4 { font-family: 'Roboto Slab', serif; }

/* Hintergrundanimation + Bubbles */
.animated-bg {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 18% 22%, rgba(138, 12, 20, 0.33), transparent 56%),
    radial-gradient(900px 820px at 84% 78%, rgba(30, 0, 8, 0.50), transparent 58%),
    radial-gradient(700px 680px at 70% 12%, rgba(255, 203, 76, 0.08), transparent 60%),
    linear-gradient(135deg, #75091f 0%, #6b0b15 55%, #af0314 95%);
  background-size: 240% 240%, 240% 240%, 200% 200%, 200% 200%;
  animation: bgmove 26s ease-in-out infinite alternate;
}
@keyframes bgmove {
  0%   { background-position: 0% 50%, 100% 50%, 0% 0%, 0% 0%; }
  100% { background-position: 100% 50%, 0% 50%, 100% 100%, 100% 100%; }
}
.animated-bg::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1000px 600px at 50% 120%, rgba(0,0,0,0.18), transparent 50%),
    radial-gradient(800px 500px at -10% -20%, rgba(255,255,255,0.08), transparent 45%);
}

/* Neue goldene Bubbles – behalten, aber mobil deaktivieren (siehe Media Query) */
.bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.bubble {
  position: absolute;
  bottom: -40vh;
  border-radius: 50%;
  filter: blur(4px);
  opacity: 0.22;
  animation: rise 24s linear infinite;
  background:
    radial-gradient(circle at 40% 35%, rgba(255,215,0,0.28) 0%, rgba(227,6,19,0.12) 42%, rgba(227,6,19,0.08) 70%, rgba(227,6,19,0.00) 100%);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.30),
    inset 0 12px 20px rgba(255,255,255,0.10),
    inset 0 -18px 26px rgba(0,0,0,0.12);
}
@keyframes rise {
  0%   { transform: translateY(0) translateX(0) scale(1);   opacity: 0.00; }
  8%   { opacity: 0.20; }
  60%  { opacity: 0.30; }
  100% { transform: translateY(-140vh) translateX(-12vw) scale(1.12); opacity: 0.00; }
}

/* Layering */
header, main { position: relative; z-index: 2; }
.page-wrap { overflow-x: clip; }
.animated-bg, .bubbles { overflow: hidden; }

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce) {
  .animated-bg { animation: none; background-size: 100% 100%; }
  .bubble { animation: none; }
}

/* ---------------------------
   Header & Logo & Titel
--------------------------- */
header {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1); padding: 26px 0 20px 0; background: transparent;
  border-radius: 0 0 28px 28px; margin-bottom: 14px;
}
.logo { height: 74px; border-radius: 14px; padding: 4px; box-shadow: 0 2px 8px #65000b22; }
.site-title {
  display: block; width: 100%; text-align: center; margin: 10px 0 20px 0;
  font-family: 'Alfa Slab One', 'Roboto Slab', serif; text-transform: uppercase;
  font-weight: 400; font-size: clamp(2rem, 6.2vw, 4.6rem); line-height: 1; letter-spacing: 1.6px; color: #fff;
  padding: 6px 18px; position: relative; z-index: 2; animation: titleFloat 6s ease-in-out infinite;
  text-shadow:
    0 2px 0 #65000b,
    0 6px 18px rgba(0,0,0,0.30),
    0 12px 28px rgba(227,6,19,0.22);
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.12);
}

/* ---------------------------
   Container: Glas-Look + Goldkanten
--------------------------- */
.gold-border { border: none !important; position: relative; }
.gold-border::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.42;
}

.glass-container {
  background: var(--glass-red); border-radius: 32px;
  box-shadow:
    0 1.5px 16px 0 rgba(255,255,255,0.10),
    inset 0 1.5px 25px 0 rgba(255,255,255,0.22),
    0 4px 28px 0 rgba(227,6,19,0.07);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  margin: 32px auto 0 auto; padding: 28px 18px; max-width: 1020px; width: 95%;
}

/* ---------------------------
   Highlight-Bereich heute
--------------------------- */
.highlight-today {
  position: relative;
  border-radius: var(--radius-3);
  padding: 28px 18px 21px 18px; margin: 32px auto 38px auto; text-align: center;
  background: var(--glass-red);
  box-shadow:
    inset 0 2.5px 24px 0 rgba(255,255,255,0.19),
    0 1.5px 7px 0 rgba(255,255,255,0.08),
    0 4px 38px 0 rgba(227,6,19,0.07);
  backdrop-filter: blur(var(--glass-blur)) saturate(115%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(115%);
  color: #fff; overflow: hidden; animation: floatHighlight 5s ease-in-out infinite alternate;
  max-width: 1020px; width: 95%;
}
@keyframes floatHighlight { 0% { transform: translateY(0) scale(1);} 45% { transform: translateY(-3px) scale(1.012);} 100% { transform: translateY(2px) scale(0.989);} }
.highlight-today h2 { font-size: 1.3rem; margin-top: 0; }
.approved-message {
  margin: var(--space-3) auto 0 auto; background: rgba(255,255,255,0.20); color: #fff;
  padding: 12px 14px; border-radius: var(--radius-1); max-width: 330px; box-shadow: 0 2px 19px #65000b22; font-size: 1em;
}

/* ---------------------------
   Hero (zwei Quadrate) + Goldschimmer
--------------------------- */
.hero-flex {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; justify-items: stretch; align-items: stretch;
  max-width: 1020px; margin: 18px auto 28px auto; padding: 0 8px;
}
.hero-card {
  aspect-ratio: 1 / 1; border-radius: var(--radius-3);
  background: var(--glass-red);
  box-shadow: 0 2px 16px rgba(0,0,0,0.20), inset 0 1.5px 20px rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 280px;
  position: relative;
}
.hero-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.6;
}
.hero-card::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;

  /* statt background: ... 50% 50/ cover; */
  background-image: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(255, 255, 255, 0.85) 10%,
    transparent 20%
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
  animation: goldSweep 6.5s linear infinite;
}

@keyframes goldSweep { to { transform: rotate(360deg); } }

.hero-content { width: 100%; height: 100%; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero-amount {
  font-family: 'Alfa Slab One', 'Roboto Slab', serif; color: #fff;
  font-size: clamp(2.1rem, 4.8vw, 3.6rem); line-height: 1.05; letter-spacing: 0.6px; text-transform: uppercase;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25); margin: 10px 0 10px 0; display: inline-block;
}
.hero-wait, .hero-sad { font-size: 5rem; line-height: 1em; margin-bottom: 8px; }
.hero-img-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; background: none; box-shadow: 0 2px 28px #e3061340, 0 16px 42px #fff3; }
.hero-image-surface { width: 100%; height: 100%; display:flex; align-items:center; justify-content:center; border-radius: 16px; }
.hero-message { font-size: 1.06rem; color: #fff; margin-bottom: 10px; max-width: 90%; }
.hero-message .hero-donor { font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 800; color: #fff; margin-top: 6px; }
.hero-meta { font-size: 1rem; color: #fff9; margin-top: 6px; }

/* ---------------------------
   Buttons
--------------------------- */
.hero-btn {
  font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 700; letter-spacing: 0.3px;
  border-radius: 14px; padding: 16px 28px; cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease, box-shadow 0.15s ease, background 0.18s ease;
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, var(--btn-grad-1) 0%, var(--btn-grad-2) 100%); box-shadow: var(--btn-shadow);
  font-size: clamp(1.05rem, 1.6vw, 0.35rem);
}
.hero-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 22%, rgba(255,255,255,0) 50%);
  pointer-events: none; mix-blend-mode: screen;
}
.hero-btn:hover {
  background: linear-gradient(180deg, var(--btn-hover-1) 0%, var(--btn-hover-2) 100%);
  transform: translateY(-1px); filter: brightness(1.03); box-shadow: var(--btn-hover-shadow);
}
.hero-btn:active { transform: translateY(0); filter: brightness(0.98); }
.hero-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-btn.hero-btn--sm { font-size: clamp(0.95rem, 1.35vw, 1.15rem); padding: 12px 22px; border-radius: 12px; }
.hero-btn.hero-btn--mono { background: transparent; border: 1.5px solid var(--btn-border); box-shadow: 0 6px 18px rgba(0,0,0,0.20); }
.hero-btn.hero-btn--mono:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,0.28); }

/* Gold-Button */
.hero-btn.hero-btn--gold {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 28%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #ffd76a 0%, #d4af37 40%, #b49120 70%, #8b6f14 86%, #3a2b00 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.28),
              inset 0 1px 0 rgba(255,255,255,0.45),
              inset 0 -1px 0 rgba(0,0,0,0.25);
  text-shadow:
    0 -1px 0 rgba(0,0,0,0.35),
    0  1px 0 rgba(255,255,255,0.18),
    0  0 8px rgba(255,255,255,0.08);
}
.hero-btn.hero-btn--gold::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.00) 100%);
  transform: skewX(-12deg); transition: left 0.9s ease; pointer-events: none;
}
.hero-btn.hero-btn--gold:hover::after { left: 160%; }

/* ---------------------------
   Kalender – bündig zur Hero/Galerie
--------------------------- */
.hero-flex,
.calendar-wrap,
.supported-gallery {
  max-width: 1020px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.calendar-wrap { padding: 0 8px; }

.calendar-view {
  max-width: 1020px; width: 100%; margin: 0 auto; box-sizing: border-box;
  position: relative; border-radius: var(--radius-3);
}
/* Goldkante für calendar-view */
/*.calendar-view.gold { composes: gold-border; }*/

.calendar-controls { max-width: 1020px; width: 95%; margin-left: auto; margin-right: auto; display:flex; align-items:center; justify-content:center; gap: 24px; margin-top: 18px; margin-bottom: 10px; }
.calendar-arrow { font-size: 2.2rem; background: none; border: none; cursor: pointer; color:#fff; padding: 6px 10px; border-radius: 10px; transition: background .13s; }
.calendar-arrow:disabled { opacity:0.32; cursor:not-allowed; }
.month-title { font-size: 1.7rem; font-family:'Roboto Slab',serif; text-align:center; margin-bottom: 12px; max-width: 830px; margin-left: auto; margin-right: auto; }

/* Rasterbreite: 7×110px + 6×10px Gap = 830px */
.calendar-grid-header,
.calendar-grid {
  grid-template-columns: repeat(7, 110px);
  gap: 10px; justify-content: center;
  margin-left: auto; margin-right: auto;
}
.cal-cell { width: 110px; height: 110px; aspect-ratio: 1 / 1; background:#fff2; color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; border-radius:16px; font-weight:700; cursor:pointer; font-size: 1rem; border: 2px solid transparent; transition: border .14s, background .12s; position:relative; overflow:hidden; }
.cal-cell.outside { opacity:0.25; cursor: default; }
.cal-cell.reserved, .cal-cell.bought, .cal-cell.past { background: #e3061328; color: #fff8; cursor: not-allowed; text-decoration: line-through; }
.cal-cell.free { background:#fff7; color: var(--aidshilfe-dark); }
.cal-cell.free:hover, .cal-cell.free:focus-visible { background:#fff; color: var(--aidshilfe-rot); }
.cal-date { display:block; font-size:1em; }
.cal-price { display:block; margin-top: 2px; font-size: 0.78rem; line-height: 1; opacity: 0.95; }
.cal-cell.free .cal-price { color: var(--aidshilfe-dark); }
.cal-cell.reserved .cal-price, .cal-cell.bought .cal-price, .cal-cell.past .cal-price { color: #fff8; text-decoration: line-through; }
.reserved-text { position:absolute; top:8px; left:8px; font-size:1.35em; color:#e30613a8; pointer-events:none; z-index:2; }

/* Flip-Animation für freie Tage */
.calendar-grid { will-change: opacity, transform; }
.calendar-grid.anim-out { opacity: 0; transform: translateY(8px); }
@keyframes gridIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.calendar-grid.anim-in { animation: gridIn 260ms ease both; }
.month-title { transition: opacity .2s ease, transform .22s ease; }
.month-title.anim-out { opacity: 0; transform: translateY(-6px); }
@keyframes monthIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.month-title.anim-in { animation: monthIn 220ms ease both; }

.cal-cell { perspective: 800px; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s ease; }
.cal-cell.flip-enabled:hover .flip-inner, .cal-cell.flip-enabled:focus-within .flip-inner { transform: rotateY(180deg); }
.flip-face { position: absolute; inset: 0; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 6px; }
.flip-front { font-family: 'Alfa Slab One', 'Roboto Slab', serif; font-size: clamp(1rem, 3.2vw, 1.45rem); letter-spacing: .6px; }
.flip-back { transform: rotateY(180deg); border-radius: inherit; text-align: center; font-weight: 700; color: #fff; background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.22); }
.flip-back .back-text { font-family: 'Roboto Condensed', Arial, sans-serif; font-size: .95rem; opacity: .95; }
.flip-back .back-amount { margin-top: 4px; font-family: 'Alfa Slab One','Roboto Slab',serif; font-size: 1.12rem; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cal-cell .flip-inner { transition: none; }
  .cal-cell.flip-enabled:hover .flip-inner, .cal-cell.flip-enabled:focus-within .flip-inner { transform: none; }
}

/* ---------------------------
   Info-Container (keine Goldkante!)
--------------------------- */
.calendar-info {
  max-width: 720px; margin: 0 auto 28px auto;
  background:
    radial-gradient(60% 70% at 50% 50%,
      rgba(0,0,0,0.42) 0%,
      rgba(0,0,0,0.32) 38%,
      rgba(0,0,0,0.20) 62%,
      rgba(0,0,0,0.00) 100%);
  border-radius: var(--radius-3);
  border: none; box-shadow: none;
  padding: 28px 28px; text-align: center;
}

/* ---------------------------
   Galerie Unterstützte Tage
--------------------------- */
.supported-title { text-align:center; margin-top:28px; margin-bottom:12px; font-family:'Roboto Slab',serif; font-size:1.6rem; }
.supported-gallery {
  margin: 0 auto 24px auto; display:grid; grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  max-width: 1020px; width: 95%;
}
.supported-kachel {
  position: relative; background: var(--glass-red);
  border-radius: var(--radius-2);
  box-shadow: 0 2px 16px rgba(0,0,0,0.20), inset 0 1.5px 20px rgba(255,255,255,0.18);
  overflow: hidden; display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1;
  cursor: pointer; transition: transform 0.20s ease, box-shadow 0.20s ease;
  width: 110px; height: 110px; margin: 0 auto;
}
.supported-kachel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.38;
}
.supported-kachel:hover, .supported-kachel:focus-visible {
  transform: scale(1.12);
  box-shadow: 0 12px 32px rgba(227,6,19,0.22), inset 0 2px 24px rgba(255,255,255,0.22);
}
.supported-kachel img { width: 100%; height:100%; object-fit:cover; display:block; }

/* Gold-Band unten */
.kachel-gold-band {
  position: absolute; left: 0; right: 0; bottom: 0; height: 25%;
  display: flex; align-items: center; justify-content: center; padding: 0 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.02) 28%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #ffe082 0%, #e1bb4b 45%, #c3a035 80%, #9b7b1c 100%);
  border-top: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.25);
}
.kachel-gold-band .gold-engrave {
  color: #fff; font-weight: 800; text-align: center; line-height: 1.05; letter-spacing: 0.3px;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.38), 0 1px 0 rgba(255,255,255,0.18), 0 0 8px rgba(255,255,255,0.06);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(0.82rem, 5.0cqi, 1.0rem);
}

/* Emoji/Platzhalter */
.placeholder-heart, .placeholder-emoji {
  display:flex; align-items:center; justify-content:center; width: 100%; height: 100%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
}
.placeholder-heart svg { width: 46%; height: auto; filter: drop-shadow(0 6px 20px rgba(212, 175, 55, 0.35)); }
.placeholder-emoji span { font-size: clamp(2rem, 6vw, 3.6rem); text-shadow: 0 8px 24px rgba(0,0,0,0.35); }

/* ---------------------------
   Modal (Lightbox)
--------------------------- */

.modal-dialog::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.38;
}

.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.22); }
.modal-title { font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 1.18rem; color: #fff; }
.modal-close {
  appearance: none; border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08); color: #fff; font-weight: 800; border-radius: 999px; padding: 6px 10px; cursor: pointer;
}
.modal-close:hover { background: rgba(255,255,255,0.14); }

.modal-body { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 12px 16px; align-items: start; overflow: auto; }
@media (min-width: 900px) { .modal-body { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } }

.modal-image-wrap {
  place-self: center; width: 100%; aspect-ratio: 1 / 1; max-height: 56vh;
  border-radius: 16px; overflow: hidden; position: relative;
  border: 1px solid rgba(255,255,255,0.22); box-shadow: inset 0 1.5px 16px rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
}
.modal-image-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.32;
}
.modal-image { width: 100%; height: 100%; object-fit: cover; display: block; }

.modal-details {
  align-self: stretch; display: flex; flex-direction: column; gap: 10px; text-align: left;
  background: rgba(0,0,0,0.18); border-radius: 14px; padding: 12px 14px; overflow: auto;
  position: relative;
}
.modal-details::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.28;
}
.modal-details .detail-line { margin: 4px 0; }
.modal-details .detail-amount { font-weight: 800; }
.modal-details .detail-date { opacity: 0.9; }
.modal-details .detail-msg {
  text-shadow: 0 -1px 0 rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.18), 0 0 8px rgba(255,255,255,0.08);
}

.modal-footer { padding: 10px 16px; border-top: 1px solid rgba(255,255,255,0.22); text-align: right; }
body.modal-open { overflow: hidden; }
@media (max-width: 640px) { .modal-dialog { width: 96vw; max-height: 82vh; } }

/* ---------------------------
   Formulare, Buy/Thanks, Login
--------------------------- */
textarea, .buy-container textarea, .buy-container input[type="file"] {
  width: 96%; min-height: 74px; font-size: 1.09rem; border-radius: 8px;
  border: 1.2px solid #e3061360; margin: 12px 0 17px 0; padding: 8px 9px; resize: vertical;
  background: rgba(255, 255, 255, 0.21); font-family: 'Roboto Condensed', Arial, sans-serif;
}
input[type="file"] { margin: 12px 0 15px 0; font-size: 1.05rem; }
input[type="password"] {
  background: rgba(255,255,255,0.32); border: 1.2px solid #e3061360;
  font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 1.18rem; padding: 10px 14px; border-radius: 8px; margin-top: 8px; color: #222;
}
::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder { color: #fff; opacity:1; }

.buy-container, .thanks-container, .login-box {
  background: var(--glass-red); border-radius: 30px;
  box-shadow:
    0 3px 20px 0 rgba(255,255,255,0.14),
    inset 0 2px 28px 0 rgba(255,255,255,0.18),
    0 8px 40px 0 rgba(227,6,19,0.08);
  backdrop-filter: blur(15px) saturate(120%); -webkit-backdrop-filter: blur(15px) saturate(120%);
  margin: 36px auto 0 auto; padding: 42px 18px 30px 18px; width: 96%;
}
.buy-container { max-width: 450px; display: flex; flex-direction: column; align-items: center; }
.buy-container form { width: 100%; display: flex; flex-direction: column; align-items: center; }
.buy-container .back-link, .back-link { margin-top: 22px; text-align: center; display: block; color: #fff; font-weight: bold; text-decoration: underline; }
.buy-container .error, .error { color: #fff; background: rgba(227,6,19,0.54); border-radius: 9px; padding: 8px 0; margin-top: 13px; font-size: 1rem; }

.thanks-container { max-width: 460px; padding: 44px 24px 38px 24px; }
.thanks-emoji { font-size: 2.8rem; margin: 16px 0; display: block; }

.login-box {
  box-shadow:
    0 1.5px 16px 0 rgba(255,255,255,0.13),
    inset 0 1.5px 25px 0 rgba(255,255,255,0.15),
    0 6px 28px 0 rgba(227,6,19,0.06);
  max-width: 390px; width: 97%; text-align: center; padding: 34px 28px 24px 28px;
}
.login-box .error { color: #fff; background: rgba(227,6,19,0.56); border-radius: 9px; padding: 8px 0; margin-top: 16px; font-size: 1rem; }

/* ---------------------------
   Admin/Tabellen
--------------------------- */
.admin-container {
  max-width: 980px; margin: 40px auto 0 auto; padding: 28px 16px; border-radius: 22px;
  background: var(--glass-bg); box-shadow: 0 5px 32px 0 rgba(227,6,19,0.18);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
table { width: 100%; border-collapse: collapse; margin-top: 22px; background: rgba(255,255,255,0.09); box-shadow: 0 2px 13px #80082012; border-radius: 13px; overflow: hidden; }
th, td { padding: 13px 6px; text-align: center; border-bottom: 1.2px solid #fff3; font-size: 1.05em; }
th { background: rgba(227,6,19,0.14); color: #fff; font-family: 'Roboto Slab', serif; font-weight: 700; }
tr:last-child td { border-bottom: none; }
.action-btn {
  background: linear-gradient(90deg, #e30613 65%, #65000b 100%); color: #fff; font-family: 'Roboto Condensed', Arial, sans-serif; font-weight: 700; font-size: 1em;
  border: none; border-radius: 7px; padding: 6px 16px; margin: 0 2px; box-shadow: 0 2px 14px #e306139a; cursor: pointer;
  transition: background 0.18s, transform 0.10s;
}
.action-btn:hover { background: linear-gradient(90deg, #65000b 70%, #e30613 100%); transform: scale(1.06); }
.approved { color: #38ef7d; font-weight: bold; }
.waiting { color: #ffcb05; font-weight: bold; }
.logout-link {
  color: #fff; background: rgba(227,6,19,0.45); padding: 7px 20px; border-radius: 7px; text-decoration: none; font-weight: bold; font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 1.08em;
  float: right; box-shadow: 0 2px 8px #e3061344; margin-bottom: 10px; transition: background 0.18s, color 0.14s;
}
.logout-link:hover { background: rgba(255,255,255,0.22); color: #e30613; }
.img-preview { max-width: 76px; border-radius: 9px; box-shadow: 0 2px 12px #0002; }
.msg { font-size: 0.99em; background: rgba(255,255,255,0.15); border-radius: 7px; padding: 6px 12px; }

/* ---------------------------
   Grüße-Bubbles (Ticker) – entkoppelt, kreisgarantiert, zentriert
--------------------------- */

/* 0) Root-Layer für alle Bubbles: eigener Kontext ohne Transform */
.bubbles-root {
  position: fixed;      /* über dem gesamten Viewport */
  inset: 0;             /* top/right/bottom/left = 0 */
  pointer-events: none; /* keine Klicks blockieren */
  transform: none !important;
  filter: none !important;
  zoom: 1 !important;
  contain: layout paint size;
  isolation: isolate;
  z-index: 900;         /* vor dem Hintergrund, hinter UI falls nötig anpassen */
}

/* 1) Einheitliches Box-Modell */
.greeting-bubble,
.greeting-bubble *,
.greeting-bubble::before,
.greeting-bubble::after {
  box-sizing: border-box;
}

/* 2) Bubble-Box: absolut im Root-Layer, garantiert kreisförmig */
.greeting-bubble {
  position: absolute;
  top: 0 !important;       /* Viewport-Anker erzwingen */
  bottom: auto !important; /* jeden Bottom-Einfluss neutralisieren */

  width: clamp(90px, 9vw, 150px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  isolation: isolate;
  transform: translateZ(0);

  color: #65000b;
  text-align: center;
  border: 1.5px solid rgba(255,255,255,0.85);
  background:
    radial-gradient(95% 95% at 50% 45%, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 38%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #ffd76a, #d4af37, #b49120);
  box-shadow: 0 20px 36px rgba(0,0,0,0.28),
              inset 0 6px 12px rgba(255,255,255,0.16),
              inset 0 -10px 16px rgba(0,0,0,0.14);

  will-change: transform, opacity;
  animation: bubble-rise-sway-vp 12s linear forwards; /* eindeutiger Name */
}

/* 3) Inhalt exakt optisch zentriert über inneren Wrapper */
.greeting-bubble-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84%;
  text-align: center;
  padding: 0;
}

/* 4) Typografie */
.bubble-date {
  font-family: 'Roboto Slab', serif;
  font-size: 0.8rem;
  color: #4a0a11;
  font-weight: 700;
  opacity: 0.9;
  margin: 0 0 4px 0;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.65);
  line-height: 1.1;
}
.bubble-msg {
  font-family: 'Roboto', Arial, sans-serif;
  font-size: 0.9rem;
  color: #3b080d;
  font-weight: 600;
  opacity: 1;
  margin: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  line-height: 1.25;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 5) Nur horizontale Anker (Startposition) */
.greeting-bubble.left  { left: 4vw;  right: auto; }
.greeting-bubble.right { right: 4vw; left: auto; }

/* 6) Keyframes: starten bei --startY (Viewport) und wandern um --travel */
@keyframes bubble-rise-sway-vp {
  0%   { transform: translateY(var(--startY, 20vh)) translateX(0px); opacity: 0; }
  5%   { transform: translateY(calc(var(--startY, 20vh) - 0.05*var(--travel, 120vh))) translateX(16px); opacity: 0.70; }
  10%  { transform: translateY(calc(var(--startY, 20vh) - 0.10*var(--travel, 120vh))) translateX(12px); opacity: 0.95; }
  20%  { transform: translateY(calc(var(--startY, 20vh) - 0.20*var(--travel, 120vh))) translateX(-22px); opacity: 1; }
  35%  { transform: translateY(calc(var(--startY, 20vh) - 0.35*var(--travel, 120vh))) translateX(26px);  opacity: 1; }
  50%  { transform: translateY(calc(var(--startY, 20vh) - 0.50*var(--travel, 120vh))) translateX(-18px); opacity: 1; }
  70%  { transform: translateY(calc(var(--startY, 20vh) - 0.70*var(--travel, 120vh))) translateX(14px);  opacity: 1; }
  80%  { transform: translateY(calc(var(--startY, 20vh) - 0.80*var(--travel, 120vh))) translateX(10px);  opacity: 0.75; }
  90%  { transform: translateY(calc(var(--startY, 20vh) - 0.90*var(--travel, 120vh))) translateX(6px);   opacity: 0.40; }
  97%  { transform: translateY(calc(var(--startY, 20vh) - 0.97*var(--travel, 120vh))) translateX(2px);   opacity: 0.12; }
  100% { transform: translateY(calc(var(--startY, 20vh) - 1.00*var(--travel, 120vh))) translateX(0px);   opacity: 0; }
}

/* 7) Fallback */
@supports not (aspect-ratio: 1 / 1) {
  .greeting-bubble { height: clamp(90px, 9vw, 150px); }
}


/* ---------------------------
   Responsive
--------------------------- */
@media (max-width: 900px) {
  .glass-container { max-width: 99vw; padding: 18px 2vw; }
  .hero-flex { grid-template-columns: 1fr; }
  .supported-gallery { grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); }
  .calendar-grid-header, .calendar-grid { grid-template-columns: repeat(7, 86px); gap: 8px; }
  .cal-cell { width: 86px; height: 86px; }
  .month-title { max-width: calc(7 * 86px + 6 * 8px); }
}
@media (max-width: 600px) {
  .supported-gallery { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 7px; }
  .calendar-grid-header, .calendar-grid { grid-template-columns: repeat(7, 64px); gap: 6px; }
  .cal-cell { width: 64px; height: 64px; }
  .month-title { max-width: calc(7 * 64px + 6 * 6px); }
}

/* Mobile-Hard-Gates: Bubbles und Greeting-Bubbles abschalten */
@media (max-width: 767px) {

  .greeting-bubble {
    display: none !important;
    animation: none !important;
    pointer-events: none !important;
  }
}

/* ==== Impressum-Overlay: Typografie wie buy_block ==== */
.imp-content {
  font-family: 'Roboto Slab', serif;
  line-height: 1.5;
  font-size: 0.78rem !important;
}
@media (max-width: 520px){
  .imp-content .label {
    min-width: auto;
    display: block;
    margin-bottom: 4px;
  }
}

/* ==== Footer mobiler und größer ==== */
.site-footer__inner {
  padding: 16px 18px !important;
  font-size: 1.02rem !important;
  line-height: 1.35 !important;
}
.site-footer__link {
  padding: 9px 12px !important;
  border-radius: 12px !important;
}