:root {
  color-scheme: light;
  --paper: #f7f5ef;
  --paper-deep: #ece9df;
  --paper-light: #fffdf8;
  --ink: #202820;
  --muted: #70766c;
  --line: #d9d8cc;
  --pine: #20352b;
  --pine-soft: #344b3d;
  --cranberry: #772c3d;
  --brass: #a88754;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --shadow: 0 22px 52px rgba(31, 41, 34, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.site-header { height: 76px; padding: 0 clamp(20px, 5.5vw, 82px); border-bottom: 1px solid rgba(32, 40, 32, .12); display: flex; align-items: center; justify-content: space-between; gap: 32px; background: rgba(247,245,239,.96); position: relative; z-index: 5; }
.brand { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font: 500 22px/1 var(--serif); letter-spacing: -.04em; white-space: nowrap; }
.brand-mark { width: 29px; height: 29px; border: 1px solid var(--brass); color: var(--brass); display: inline-grid; place-items: center; font: 500 12px var(--serif); letter-spacing: 0; }
.header-nav, .header-actions { display: flex; align-items: center; gap: 26px; }
.header-nav a, .site-footer a:not(.brand) { font-size: 12px; text-decoration: none; color: var(--muted); }
.header-nav a:hover, .site-footer a:hover { color: var(--ink); }
.language-control select { border: 0; background: transparent; color: var(--ink); padding: 8px 22px 8px 4px; font-size: 12px; cursor: pointer; }
.button { border: 1px solid transparent; padding: 13px 20px; text-decoration: none; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; display: inline-flex; justify-content: center; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.button:hover { transform: translateY(-1px); }
.button-dark { color: #fffdf8; background: var(--pine); }
.button-dark:hover { background: #2d4839; }
.button-quiet { color: var(--ink); background: transparent; border-color: var(--line); }
.button-quiet:hover { border-color: var(--pine); }
.button-small { padding: 10px 15px; font-size: 12px; }
.button-berry { background: var(--cranberry); color: white; }
.button-berry:hover { background: #642234; }
.text-button { border: 0; background: none; padding: 10px 0; color: var(--ink); font-size: 13px; text-decoration: underline; text-decoration-color: #a8aa9f; text-underline-offset: 4px; cursor: pointer; }

.home-hero { max-width: 1360px; margin: auto; padding: 64px clamp(22px, 5.5vw, 82px) 76px; display: grid; grid-template-columns: .87fr 1.13fr; align-items: center; gap: clamp(38px, 7vw, 100px); }
.hero-copy { max-width: 500px; }
.hero-copy h1 { margin: 0 0 22px; font: 400 clamp(46px, 5.4vw, 74px)/1.04 var(--serif); letter-spacing: -.055em; }
.hero-copy h1 em { color: var(--cranberry); font-weight: 400; }
.hero-copy p { max-width: 445px; margin: 0; color: #646a60; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 30px; flex-wrap: wrap; }
.hero-art { position: relative; min-width: 0; }
.hero-art img { width: 100%; display: block; aspect-ratio: 1.18 / 1; object-fit: cover; box-shadow: var(--shadow); }
.hero-caption { padding-top: 13px; display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--muted); }
.hero-caption span:first-child { letter-spacing: .12em; text-transform: uppercase; }
.hero-corner { position: absolute; top: -18px; right: -16px; width: 50px; height: 50px; background: var(--cranberry); color: white; display: grid; place-items: center; font: 400 20px var(--serif); box-shadow: 0 8px 20px rgba(80, 31, 43, .2); }

.intro-band { background: var(--pine); color: var(--paper); padding: 70px 24px 76px; }
.intro-inner { max-width: 1100px; margin: auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; align-items: center; }
.intro-band h2 { margin: 0; font: 400 clamp(34px, 4vw, 54px)/1.12 var(--serif); letter-spacing: -.04em; }
.intro-copy p { color: #d0d8ce; font-size: 15px; line-height: 1.8; margin: 0 0 20px; max-width: 520px; }
.intro-copy strong { color: #fffdf8; font-weight: 500; }
.steps-section { max-width: 1160px; margin: auto; padding: 82px 26px 92px; }
.steps-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 38px; }
.steps-heading h2 { margin: 0; font: 400 clamp(34px, 4vw, 52px)/1.12 var(--serif); letter-spacing: -.04em; }
.steps-heading p { max-width: 300px; margin: 0; color: var(--muted); font-size: 14px; }
.steps-list { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3,1fr); }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 21px 22px 0 0; }
.step + .step { border-left: 1px solid var(--line); padding-left: 22px; }
.step-number { font: 400 14px var(--serif); color: var(--brass); }
.step h3 { margin: 0 0 7px; font: 500 21px var(--serif); }
.step p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.closing-note { max-width: 1160px; margin: 0 auto 88px; padding: 0 26px; }
.closing-note-inner { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 12px; }

.site-footer { border-top: 1px solid var(--line); padding: 24px clamp(20px, 5.5vw, 82px); }
.footer-inner { max-width: 1360px; margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.footer-inner .brand { font-size: 18px; }
.footer-line { color: var(--muted); font-size: 11px; }

/* Recipient's calendar */
.recipient-page { padding: 48px 24px 94px; min-height: 80vh; }
.recipient-heading { max-width: 760px; margin: 0 auto 34px; text-align: center; }
.recipient-heading h1 { margin: 0 0 10px; font: 400 clamp(40px, 6vw, 68px)/1.04 var(--serif); letter-spacing: -.05em; }
.recipient-heading h1 span { color: var(--cranberry); }
.recipient-heading p { color: var(--muted); font-size: 15px; margin: 0; }
.recipient-cover { max-width: 1060px; margin: 0 auto 27px; padding: 14px; background: #e8e4d8; border: 1px solid #d2d0c5; box-shadow: 0 22px 50px rgba(31, 41, 34, .13); }
.recipient-cover-inner { position: relative; padding: clamp(20px, 3.4vw, 42px); background: var(--pine); border: 1px solid rgba(190,171,130,.55); }
.recipient-cover-inner::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(194,174,134,.24); pointer-events: none; }
.calendar-bottom { max-width: 1060px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 4px 0; color: var(--muted); font-size: 12px; }
.calendar-note { display: flex; align-items: center; gap: 10px; }
.calendar-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cranberry); }

/* ==========================================================================
   CREATOR & EDITOR FLOW (HAUTE ÉDITION LUXURY DESIGN)
   ========================================================================== */

.editor-page { max-width: 1210px; margin: 0 auto; padding: 46px 28px 90px; }
.editor-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; border-bottom: 1px solid rgba(220,181,105,.35); padding-bottom: 24px; margin-bottom: 30px; }
.editor-top h1 { 
  margin: 0 0 4px; 
  font: 700 clamp(34px, 4vw, 48px)/1.1 'Cinzel', var(--serif); 
  letter-spacing: -.02em; 
  background: linear-gradient(180deg, #FFF8DC 0%, #F5D384 45%, #B58434 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.editor-top p { margin: 0; color: #d5c1a8; font-size: 14px; }
.editor-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.button-gold {
  background: linear-gradient(135deg, #F6E29F 0%, #D4AF37 50%, #9B7617 100%);
  color: #1F070B !important;
  font-weight: 700;
  border: 1px solid #FFF2C4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 14px rgba(246, 226, 159, 0.4);
}
.button-gold:hover {
  background: linear-gradient(135deg, #FFF5D2 0%, #E8C466 50%, #B89228 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5), 0 0 20px rgba(246, 226, 159, 0.65);
}

.progress-line { display: flex; align-items: center; gap: 15px; margin: 0 0 24px; color: #dfbd7d; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-family: 'Cinzel', serif; }
.progress-track { height: 2px; background: rgba(220,181,105,.24); flex: 1; max-width: 240px; }
.progress-track span { height: 100%; display: block; background: linear-gradient(90deg, #F5D384, #871c2b); transition: width .2s ease; }
.editor-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: clamp(32px, 6vw, 82px); align-items: start; }
.editor-section-title { font: 400 29px var(--serif); margin: 0 0 18px; color: #FFF8DC; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.field { margin-bottom: 18px; display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 13px; font-weight: 600; color: #F5D384; letter-spacing: 0.02em; }
.field small { color: #d5c1a8; font-size: 11px; }
.field input, .field textarea, .field select { 
  width: 100%; 
  background: rgba(30, 8, 12, 0.85); 
  color: #FFF8DC; 
  border: 1.5px solid rgba(220, 181, 105, 0.35); 
  border-radius: 6px; 
  padding: 12px 14px; 
  outline: 0; 
  font-size: 14px; 
  font-family: var(--sans);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
.field input:focus, .field textarea:focus, .field select:focus { 
  border-color: #F6E29F; 
  box-shadow: 0 0 16px rgba(246, 226, 159, 0.4); 
}
.upload-label { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border: 1.5px dashed rgba(220, 181, 105, 0.55); 
  border-radius: 6px; 
  background: rgba(30, 8, 12, 0.5); 
  padding: 16px; 
  cursor: pointer; 
  font-size: 13px; 
  color: #FFF8DC; 
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.upload-label:hover { 
  background: rgba(45, 12, 18, 0.7); 
  border-color: #F6E29F; 
  transform: translateY(-1px);
}
.upload-label { position: relative; }
.upload-label input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.upload-label:focus-within { outline: 3px solid #F6E29F; outline-offset: 4px; border-color: #F6E29F; }

.editor-preview { background: rgba(35, 10, 15, 0.9); border: 2px solid #D4AF37; border-radius: 8px; padding: 14px; position: sticky; top: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
.editor-preview-frame { position: relative; border-radius: 6px; overflow: hidden; }
.editor-preview img { display: block; width: 100%; aspect-ratio: 1.18 / 1; object-fit: cover; }
.editor-preview-overlay { position: absolute; top: 12px; left: 12px; z-index: 2; }
.preview-tag { background: rgba(16, 4, 6, 0.85); border: 1px solid #D4AF37; color: #F5D384; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 0.15em; padding: 4px 10px; border-radius: 9999px; }
.editor-preview-caption { padding: 12px 2px 2px; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #d5c1a8; font-family: 'Cinzel', serif; }

.days-editor { margin-top: 40px; border-top: 1px solid rgba(220,181,105,.35); padding-top: 24px; }
.days-editor-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.days-editor-head h2 { font: 700 29px 'Cinzel', var(--serif); margin: 0; color: #FFF8DC; }
.days-editor-head p { color: #d5c1a8; font-size: 13px; margin: 0; }

/* 24 Edle Samtkabinetts-Schubladen im Editor */
.editor-day-grid { 
  display: grid; 
  grid-template-columns: repeat(6, minmax(0, 1fr)); 
  gap: 12px 10px; 
  margin-bottom: 28px;
}
.editor-day { 
  min-height: 85px; 
  padding: 10px 8px; 
  border: 1.5px solid rgba(212, 175, 55, 0.4); 
  border-radius: 8px; 
  background: radial-gradient(circle at 45% 28%, #4A0E17 0%, #2A050B 100%); 
  text-align: left; 
  cursor: pointer; 
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); 
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}
.editor-day:hover { 
  background: radial-gradient(circle at 45% 28%, #6B1722 0%, #3D0910 100%); 
  border-color: #F6E29F; 
  transform: translateY(-2px); 
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), 0 0 16px rgba(246, 226, 159, 0.4);
}
.editor-day.selected { 
  background: radial-gradient(circle at 45% 28%, #7D1A25 0%, #460910 100%); 
  border-color: #FFF2C4; 
  box-shadow: 0 0 20px 4px rgba(246, 226, 159, 0.65), 0 8px 24px rgba(0, 0, 0, 0.85);
  transform: scale(1.02);
}
.editor-day-top { display: flex; justify-content: space-between; align-items: center; }
.editor-day-num { font: 700 20px 'Cinzel', serif; color: #FFF8DC; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
.editor-day-icon { font-size: 14px; }
.editor-day-title { color: #d5c1a8; font-size: 10px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 4px; }
.editor-day-check { position: absolute; right: 6px; bottom: 6px; font-size: 10px; font-weight: 700; color: #1F070B; background: #F6E29F; border-radius: 50%; width: 15px; height: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 6px #F6E29F; }
/* Noch nicht geprüft: leerer Ring statt Häkchen */
.editor-day-pending { position: absolute; right: 6px; bottom: 6px; width: 15px; height: 15px; border-radius: 50%; border: 1.5px dashed rgba(246, 226, 159, 0.55); }

/* Teilen gesperrt, solange nicht alle Türchen geprüft sind */
.button.is-pending { filter: saturate(0.55); opacity: 0.85; }
.review-gate-hint { color: #d5c1a8; font-size: 13px; margin: 14px 0 10px; text-align: center; }
.review-gate-days { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; }
.review-gate-day { font: 700 14px 'Cinzel', serif; color: #FFF8DC; background: radial-gradient(circle at 45% 28%, #7D1A25 0%, #460910 100%); border: 1px solid rgba(220, 181, 105, 0.55); border-radius: 8px; min-width: 42px; height: 38px; cursor: pointer; }
.review-gate-day:hover, .review-gate-day:focus-visible { border-color: #FFF2C4; box-shadow: 0 0 10px rgba(246, 226, 159, 0.5); }

.day-editor-panel { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 28px; margin-top: 24px; padding: 28px; background: rgba(30, 8, 12, 0.8); border: 1.5px solid rgba(220,181,105,.45); border-radius: 10px; box-shadow: 0 15px 40px rgba(0,0,0,0.5); }
.day-editor-stamp { text-align: center; padding: 20px 10px; background: radial-gradient(circle at 50% 30%, #560D15 0%, #2A050B 100%); border: 2px solid #D4AF37; border-radius: 12px; box-shadow: inset 0 0 14px rgba(0,0,0,0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.day-editor-stamp .stamp-num { font: 700 48px/1 'Cinzel', serif; color: #F5D384; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.day-editor-stamp small { font: 600 11px var(--sans); display: block; color: #FFF8DC; letter-spacing: .08em; margin-top: 8px; text-transform: uppercase; }
.day-editor-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.day-editor-fields .field-full { grid-column: 1 / -1; }
.save-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; }
.save-status { color: #F5D384; font-size: 13px; font-weight: 600; }

.media-live-preview-box { background: rgba(20, 4, 7, 0.7); border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 8px; padding: 12px; margin-top: 10px; }
.media-live-item { display: flex; flex-direction: column; gap: 6px; }
.preview-type-pill { font-family: 'Cinzel', serif; font-size: 11px; letter-spacing: 0.1em; color: #F5D384; }

/* Media Format & Position Customizer Box (Türchen & Titelbild) */
.media-customizer-box {
  background: rgba(18, 5, 8, 0.85);
  border: 1px solid rgba(220, 181, 105, 0.35);
  border-radius: 8px;
  padding: 14px;
  margin-top: 10px;
}
.customizer-subfield {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.customizer-label {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #F5D384;
  text-transform: uppercase;
  font-weight: 600;
}
.customizer-pills-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.customizer-pill {
  flex: 1;
  min-width: 140px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(220, 181, 105, 0.35);
  border-radius: 6px;
  color: #FAF4E8;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.customizer-pill input[type="radio"] {
  accent-color: #D4AF37;
  cursor: pointer;
}
.customizer-pill.active, .customizer-pill:has(input[type="radio"]:checked) {
  background: rgba(220, 181, 105, 0.18);
  border-color: #F6E29F;
  color: #FFF2C4;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(246, 226, 159, 0.25);
}
.customizer-pos-presets {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pos-preset-btn {
  flex: 1;
  min-width: 80px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(220, 181, 105, 0.3);
  color: #E8DAC6;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: var(--sans);
}
.pos-preset-btn:hover {
  background: rgba(220, 181, 105, 0.15);
  border-color: #D4AF37;
  color: #FFF;
}
.pos-preset-btn.active {
  background: linear-gradient(135deg, #F6E29F 0%, #D4AF37 100%);
  color: #2D1418;
  font-weight: 700;
  border-color: #FFF2C4;
}
.customizer-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.customizer-slider-row .slider-text {
  font-size: 11px;
  color: #D5C1A8;
  white-space: nowrap;
}
.customizer-slider-row input[type="range"] {
  flex: 1;
  accent-color: #D4AF37;
  height: 5px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

/* Titelbild-Portrait auf der Empfängerseite */
.recipient-cover-portrait-wrap { max-width: 1060px; margin: 0 auto 24px; text-align: center; }
.recipient-cover-portrait {
  display: inline-block;
  max-width: 480px;
  width: 100%;
  border: 3px solid #D4AF37;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.7), 0 0 30px rgba(212, 175, 55, 0.25);
  background: radial-gradient(circle at 50% 50%, #2A080E 0%, #120306 100%);
}
.recipient-cover-portrait img {
  display: block;
  width: 100%;
  max-height: 340px;
  border-radius: 9px;
  transition: object-position 0.2s ease;
}

/* Gutschein- & Link-Button im Royal Letter Modal */
.letter-link-action-card {
  margin: 20px 0;
  padding: 16px;
  background: linear-gradient(135deg, #FAF5E8 0%, #F5ECCF 100%);
  border: 1.5px solid #D4AF37;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.letter-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #7D1A25 0%, #4D0911 100%);
  color: #FFF8DC !important;
  border: 1.5px solid #F5D384;
  border-radius: 9999px;
  padding: 12px 28px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(125, 26, 37, 0.4), 0 0 12px rgba(246, 226, 159, 0.3);
  transition: all 0.25s ease;
  cursor: pointer;
}
.letter-action-btn:hover {
  background: linear-gradient(135deg, #9C182F 0%, #680E1A 100%);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(125, 26, 37, 0.6), 0 0 20px rgba(246, 226, 159, 0.6);
}
.letter-action-btn .action-arrow { font-size: 18px; line-height: 1; }
.letter-action-url-hint { display: block; font-size: 11px; color: #7A583A; margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.letter-inline-link { color: #7D1A25; font-weight: 700; text-decoration: underline; }

/* TEILEN-MODAL (GIFT & SHARE OVERLAY) */
.share-modal-card {
  width: min(92vw, 540px);
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(145deg, #240A10 0%, #150306 100%);
  border: 2px solid #D4AF37;
  border-radius: 14px;
  padding: 36px 28px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.9), 0 0 35px rgba(212, 175, 55, 0.35);
  color: #FFF8DC;
  position: relative;
  text-align: center;
}
.share-modal-crest { display: flex; justify-content: center; margin-bottom: 12px; }
.crest-seal { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #871c2b, #4a0d15); border: 2px solid #F5D384; color: #F5D384; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.6); }
.share-modal-title { font: 700 clamp(24px, 3.5vw, 32px)/1.15 'Cinzel', var(--serif); color: #FFF8DC; margin: 0 0 8px; }
.share-modal-sub { color: #d5c1a8; font-size: 14px; margin: 0 0 24px; }
.share-link-box { display: flex; gap: 8px; margin-bottom: 16px; }
.share-link-input { flex: 1; background: rgba(16, 4, 6, 0.9); border: 1.5px solid rgba(220,181,105,.4); border-radius: 6px; padding: 12px 14px; color: #F5D384; font-family: monospace; font-size: 13px; outline: none; }
.share-action-row { margin-bottom: 24px; }
.whatsapp-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: white !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 15px;
  border-radius: 8px;
  padding: 14px 20px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.whatsapp-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
}
.share-qr-section { margin-bottom: 24px; padding: 18px; background: rgba(16, 4, 6, 0.6); border: 1px solid rgba(220,181,105,.3); border-radius: 10px; }
.share-qr-title { font: 700 16px 'Cinzel', serif; color: #F5D384; margin: 0 0 4px; }
.share-qr-hint { font-size: 12px; color: #d5c1a8; margin: 0 0 14px; }
.share-qr-frame { background: #FAF5E8; padding: 12px; border: 2px solid #D4AF37; border-radius: 8px; display: inline-block; }
.share-qr-img { display: block; width: 180px; height: 180px; }
.share-status-card { padding: 14px 18px; background: rgba(246, 226, 159, 0.08); border: 1px solid rgba(246, 226, 159, 0.3); border-radius: 8px; text-align: left; }
.status-badge-row { display: flex; align-items: center; gap: 8px; }
.status-indicator-dot { width: 10px; height: 10px; border-radius: 50%; background: #4CAF50; box-shadow: 0 0 8px #4CAF50; }
.status-tag { font-size: 13px; color: #FFF8DC; }
.status-tag strong { color: #F5D384; }
.status-footnote { display: block; font-size: 11px; color: #d5c1a8; margin-top: 4px; }

@media (max-width: 900px) {
  .editor-day-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .day-editor-panel { grid-template-columns: 1fr; }
  .day-editor-stamp { flex-direction: row; gap: 14px; padding: 14px; }
}
@media (max-width: 580px) {
  .editor-day-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day-editor-fields { grid-template-columns: 1fr; }
  .day-editor-fields .field-full { grid-column: auto; }
}

/* Door opening */
.modal-root:empty { display: none; }
.modal-root, #modal-root:not(:empty) { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(16, 25, 20, .64); backdrop-filter: blur(3px); animation: fadeIn .18s ease-out; }
.door-modal { width: min(100%, 620px); max-height: min(90vh, 860px); overflow: auto; background: var(--paper-light); box-shadow: 0 26px 80px rgba(0,0,0,.28); animation: modalIn .36s cubic-bezier(.18,.8,.25,1); }
.modal-top { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-day-label { color: var(--cranberry); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.modal-close { width: 36px; height: 36px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 20px; line-height: 1; }
.modal-content { padding: 28px clamp(22px, 5vw, 50px) 24px; }
.modal-content h2 { font: 400 clamp(30px,5vw,44px)/1.14 var(--serif); letter-spacing: -.035em; margin: 0 0 17px; }
.modal-content img, .modal-content video { width: 100%; max-height: 390px; object-fit: cover; display: block; margin: 0 0 20px; }
.modal-content audio { width: 100%; margin: 10px 0 20px; }
.modal-message { white-space: pre-wrap; color: #535a51; font: 400 16px/1.8 var(--serif); }
.modal-signature { font: 400 20px var(--serif); color: var(--cranberry); margin-top: 24px; }
.reaction-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding: 15px 22px; gap: 12px; }
.reaction-row span { font-size: 12px; color: var(--muted); }
.reaction-button { border: 1px solid var(--line); background: transparent; padding: 8px 12px; cursor: pointer; font-size: 12px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 40; background: var(--pine); color: white; padding: 12px 18px; font-size: 12px; box-shadow: var(--shadow); animation: fadeIn .2s ease-out; }
.empty-state { max-width: 680px; margin: 70px auto; padding: 0 22px; text-align: center; }
.empty-state h1 { font: 400 48px/1.08 var(--serif); }
.empty-state p { color: var(--muted); }
.loading { text-align: center; padding: 80px 20px; color: var(--muted); font: 400 24px var(--serif); }

@keyframes currentDoor { 0%,100% { box-shadow: inset 0 0 0 2px #fbf8f0, inset 0 0 0 3px #b99a67; } 50% { box-shadow: inset 0 0 0 2px #fbf8f0, inset 0 0 0 4px #b99a67; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr 1fr; gap: 35px; }
  .hero-copy h1 { font-size: clamp(42px, 6vw, 60px); }
  .editor-layout { grid-template-columns: 1fr; }
  .editor-preview { display: none; }
}
@media (max-width: 680px) {
  .site-header { height: 66px; padding: 0 17px; gap: 8px; }
  .brand { font-size: 18px; gap: 7px; }
  .brand-mark { width: 25px; height: 25px; }
  .header-nav { display: none; }
  .header-actions { gap: 5px; }
  .music-toggle-btn { padding: 6px 9px; font-size: 11px; }
  .music-text { display: none; }
  .language-control select { max-width: 62px; padding-right: 0; }
  .button-small { padding: 9px 10px; font-size: 10px; }
  .home-hero { grid-template-columns: 1fr; padding: 48px 22px 55px; gap: 34px; }
  .hero-copy h1 { font-size: clamp(46px, 12vw, 62px); max-width: 510px; }
  .hero-copy p { font-size: 14px; }
  .hero-actions { gap: 16px; margin-top: 23px; }
  .hero-art img { aspect-ratio: 1.13 / 1; }
  .hero-corner { width: 42px; height: 42px; top: -12px; right: -8px; }
  .intro-band { padding: 54px 23px; }
  .intro-inner { grid-template-columns: 1fr; gap: 18px; }
  .steps-section { padding: 60px 23px 65px; }
  .steps-heading { display: block; margin-bottom: 25px; }
  .steps-heading p { margin-top: 12px; }
  .steps-list { grid-template-columns: 1fr; }
  .step, .step + .step { border-left: 0; border-bottom: 1px solid var(--line); padding: 16px 0; }
  .closing-note { margin-bottom: 60px; }
  .closing-note-inner { display: block; line-height: 1.8; }
  .footer-inner { flex-wrap: wrap; }
  .footer-line { order: 3; width: 100%; }
  .recipient-page { padding: 35px 14px 65px; }
  .recipient-heading { margin-bottom: 24px; }
  .recipient-heading p { font-size: 13px; }
  .recipient-cover { padding: 7px; }
  .recipient-cover-inner { padding: 16px 11px; }
  .recipient-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
  .door { aspect-ratio: 1 / 1; }
  .door::after { width: 3px; height: 3px; right: 5px; bottom: 5px; }
  .door-number { font-size: 20px; }
  .door.is-featured { grid-column: span 2; grid-row: span 2; }
  .door.is-featured .door-number { font-size: 42px; }
  .calendar-bottom { align-items: flex-start; flex-direction: column; gap: 7px; padding: 10px 4px; font-size: 11px; }
  .editor-page { padding: 32px 18px 60px; }
  .editor-top { display: block; }
  .editor-actions { margin-top: 15px; }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .editor-day-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .editor-day { min-height: 66px; }
  .day-editor-panel { grid-template-columns: 1fr; gap: 16px; }
  .day-editor-stamp { font-size: 49px; }
  .day-editor-stamp small { display: inline; margin-left: 10px; }
  .day-editor-fields { grid-template-columns: 1fr; }
  .day-editor-fields .field-full { grid-column: auto; }
  .save-row { align-items: flex-start; flex-direction: column; }
  .modal-root, #modal-root:not(:empty) { padding: 10px; }
  .door-modal { max-height: 94vh; }
  .modal-content { padding-top: 22px; }
}
/* Holiday edition: velvet, candlelight and polished brass */
:root {
  color-scheme: dark;
  --paper: #170d10;
  --paper-deep: #281116;
  --paper-light: #fff4e2;
  --ink: #fff1dc;
  --muted: #cbb79f;
  --line: rgba(220, 181, 105, .3);
  --pine: #10271e;
  --pine-soft: #1b3a2c;
  --cranberry: #871c2b;
  --brass: #d9b66c;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --shadow: 0 28px 70px rgba(0, 0, 0, .42);
}
html, body { background: #170d10; }
body { color: var(--ink); background: radial-gradient(ellipse at 50% -18%,rgba(130,33,43,.33),transparent 48rem),radial-gradient(ellipse at 90% 28%,rgba(212,164,83,.07),transparent 30rem),#170d10; }
.site-header { height: 78px; color: var(--ink); border-bottom: 1px solid rgba(220,181,105,.24); background: rgba(23,13,16,.94); box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.brand { font-size: 25px; letter-spacing: -.045em; }
.brand-mark { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--brass); color: #f2d99f; box-shadow: inset 0 0 0 3px rgba(217,182,108,.09),0 0 20px rgba(217,182,108,.12); }
.header-nav a, .site-footer a:not(.brand) { color: #d6c1a7; }
.header-nav a:hover, .site-footer a:hover { color: #f2d99f; }
.language-control select { color: var(--ink); }
.button { border-radius: 2px; letter-spacing: .025em; transition: background .24s ease,color .24s ease,transform .24s ease,box-shadow .24s ease; }
.button-dark { color: #2d1710; background: linear-gradient(135deg,#f8e5b7,#d5ae64 48%,#f1d596); border-color: #f0d493; box-shadow: 0 6px 18px rgba(208,160,71,.19),inset 0 1px rgba(255,255,255,.76); }
.button-dark:hover { background: linear-gradient(135deg,#fff0c9,#e2bf77,#f6dfaa); box-shadow: 0 9px 25px rgba(208,160,71,.28); }
.button-berry { color: #fff0db; border-color: rgba(240,196,132,.52); background: linear-gradient(135deg,#9d2637,#69121f 70%,#54101b); box-shadow: 0 8px 22px rgba(80,9,18,.35),inset 0 1px rgba(255,255,255,.16); }
.button-berry:hover { background: linear-gradient(135deg,#b02d3f,#791624); box-shadow: 0 10px 26px rgba(80,9,18,.48); }
.button-quiet { color: #f4dfbd; background: rgba(255,245,223,.035); border-color: rgba(220,181,105,.42); }
.button-quiet:hover { border-color: #e9cc8f; background: rgba(220,181,105,.08); }
.text-button { color: #edcf97; text-decoration-color: rgba(237,207,151,.5); }
.home-hero { max-width: 1480px; min-height: 690px; padding-top: 76px; padding-bottom: 83px; grid-template-columns: .82fr 1.18fr; gap: clamp(40px,6vw,94px); }
.hero-copy { max-width: 550px; position: relative; z-index: 1; }
.hero-copy::before { content: attr(data-eyebrow); display: block; margin-bottom: 23px; color: #dfbd7d; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }
.hero-copy h1 { color: #fff2de; font-size: clamp(57px,6vw,86px); line-height: .98; letter-spacing: -.045em; }
.hero-copy h1 em { color: #e8c67f; font-style: italic; }
.hero-copy p { color: #d5c1a8; max-width: 460px; font-size: 15px; line-height: 1.9; }
.hero-actions { gap: 21px; margin-top: 34px; }
.hero-art { padding: 10px; background: linear-gradient(135deg,#f1d99d,#815b2a 16%,#f4dfac 51%,#855c2a 80%,#f2d99f); box-shadow: 0 32px 80px rgba(0,0,0,.48),0 0 48px rgba(204,157,75,.13); }
.hero-art img { aspect-ratio: 1.2 / 1; object-fit: cover; box-shadow: none; }
.hero-caption { color: #e4d1b3; padding: 15px 5px 4px; }
.hero-caption span:first-child { color: #efd9a7; }
.hero-corner { top: -23px; right: -22px; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(249,224,164,.8); color: #3d1a17; background: linear-gradient(135deg,#f8e9bb,#c99b4d); box-shadow: 0 8px 25px rgba(0,0,0,.34); }
.intro-band { position: relative; overflow: hidden; padding: 78px 24px 84px; color: #fff1db; background: linear-gradient(112deg,#50121c,#721a27 50%,#42121a); border-top: 1px solid rgba(236,198,128,.52); border-bottom: 1px solid rgba(236,198,128,.42); }
.intro-band::before, .intro-band::after { content: "✦"; position: absolute; color: rgba(239,208,148,.22); font-size: 148px; line-height: 1; }
.intro-band::before { left: 4%; top: 13px; }
.intro-band::after { right: 5%; bottom: -27px; }
.intro-inner { position: relative; z-index: 1; }
.intro-band h2 { font-size: clamp(42px,5vw,65px); color: #fff1da; }
.intro-copy p { color: #f0d8c0; }
.intro-copy strong { color: #ffdfa0; letter-spacing: .015em; }
.steps-section { padding-top: 86px; padding-bottom: 94px; }
.steps-heading h2 { color: #fff0dc; font-size: clamp(42px,5vw,62px); }
.steps-heading p, .step p { color: #cbb79f; }
.steps-list { border-color: rgba(220,181,105,.35); }
.step { padding-top: 24px; }
.step + .step { border-color: rgba(220,181,105,.24); }
.step-number { color: #e0bd76; }
.step h3 { color: #f7e5c8; font-size: 24px; }
.closing-note { margin-bottom: 84px; }
.closing-note-inner { border-color: rgba(220,181,105,.35); color: #dbc7aa; }
.site-footer { background: #10090b; border-color: rgba(220,181,105,.3); }
.footer-line { color: #bda88d; }

.recipient-page { padding-top: 42px; }
.recipient-heading { margin-bottom: 34px; }
.recipient-heading h1 { color: #fff0dc; font-size: clamp(52px,7vw,82px); }
.recipient-heading h1 span { color: #e8c477; font-style: italic; }
.recipient-heading p { color: #d5c1a8; }
.recipient-cover { max-width: 1060px; padding: 12px; background: linear-gradient(135deg,#f1d99d,#885d2d 20%,#e8ce91 50%,#795227 82%,#e1c27a); border: 0; box-shadow: 0 30px 85px rgba(0,0,0,.48),0 0 50px rgba(212,165,83,.12); }
.recipient-cover-inner { padding: clamp(20px,3.4vw,42px); background: linear-gradient(140deg,#621722,#3a1118 48%,#51151e); border: 1px solid rgba(255,225,157,.47); box-shadow: inset 0 0 42px rgba(0,0,0,.24); }
.recipient-cover-inner::before { inset: 9px; border-color: rgba(247,219,154,.26); }
.recipient-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 14px;
  position: relative;
}

/* ==========================================================================
   DAS WEIHNACHTS-KABINETT: FOTOREALISTISCHE RUNDBOGEN-PORTALE, SAMTKISSEN & WACHSSIEGEL-BRIEF
   ========================================================================== */

.cabinet-cell {
  position: relative;
  aspect-ratio: 1 / 1.38;
  perspective: 1000px;
  isolation: isolate;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cabinet-cell.cell-focus-brief {
  z-index: 20;
  box-shadow: 0 0 32px 6px rgba(246, 226, 159, 0.65), 0 14px 40px rgba(0, 0, 0, 0.85);
  border-radius: 36px 36px 4px 4px;
}

/* Der goldene Portal-Rahmen (Rundbogen wie im Foto) */
.cell-arch-frame {
  position: absolute;
  inset: 0;
  border-radius: 36px 36px 4px 4px;
  border: 2px solid #D4AF37;
  background: #1B060B;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.65), 
    inset 0 0 0 1px #F6E29F, 
    inset 0 0 0 3px #560E16;
  overflow: visible;
}

/* Messing-Zylinderscharniere am linken Türpfosten */
.cell-hinge {
  position: absolute;
  left: -5px;
  width: 7px;
  height: 18px;
  background: linear-gradient(90deg, #6E4915 0%, #FFF4C4 45%, #D4AF37 75%, #4C300B 100%);
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
  z-index: 10;
}
.cell-hinge-top { top: 22%; }
.cell-hinge-bottom { bottom: 22%; }

/* Messing-Schließblech am rechten Pfosten */
.cell-latch-plate {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: linear-gradient(90deg, #D4AF37 0%, #FFF2BE 50%, #8C601F 100%);
  border-radius: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* Das fotorealistische Fach: Echter Rundbogen, Deckenstrahler, Samtkissen & Wachssiegel-Brief aus dem Originalfoto */
.cell-interior {
  position: absolute;
  inset: 0;
  border-radius: 34px 34px 3px 3px;
  background-image: url('/app-assets/images/niche-photorealistic.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  box-shadow: 
    0 8px 24px rgba(0, 0, 0, 0.75), 
    inset 0 0 0 1px rgba(255, 235, 175, 0.35);
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
}

/* Der Brief im Nischen-Inneren ist direkt und natürlich anklickbar (kein störender Button) */
.envelope-hotspot {
  position: absolute;
  bottom: 4%;
  left: 10%;
  right: 10%;
  height: 60%;
  cursor: pointer;
  z-index: 6;
  border-radius: 8px;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.cabinet-cell.has-opened .cell-interior {
  cursor: pointer;
}

.cabinet-cell.has-opened .cell-interior:hover,
.cabinet-cell.has-opened .envelope-hotspot:hover {
  filter: brightness(1.08);
}

/* ==========================================================================
   DAS 3D-TÜRBLATT: RUNDBOGEN, 100% BLICKDICHTER SAMT & MESSING-KNOPF
   ========================================================================== */

.door {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 34px 34px 3px 3px;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.35, 1), box-shadow 0.45s ease, filter 0.45s ease;
  
  /* 100% Blickdichter, opulenter roter Samt (kein Durchscheinen des Fachs!) */
  background: radial-gradient(circle at 45% 28%, #8E1522 0%, #600E17 55%, #36060C 100%);
  opacity: 1 !important;
  
  /* Massiver 3D-Goldrahmen mit Profilierung */
  border: 3px solid #D4AF37;
  box-shadow: 
    inset 0 0 0 1px #FFF0B6, 
    inset 0 0 0 3px #560D15, 
    inset 0 0 18px rgba(0, 0, 0, 0.75), 
    0 8px 22px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
  overflow: visible;
}

.door-face {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.door-snowflake-top {
  font-size: 14px;
  color: #F8E6AE;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  margin-bottom: 3px;
}

.door-number {
  font-family: 'Cinzel', serif;
  font-size: clamp(23px, 2.5vw, 32px);
  font-weight: 700;
  background: linear-gradient(180deg, #FFF8DC 0%, #F5D384 45%, #B58434 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
  line-height: 1;
  margin: 2px 0;
}

.door-rosette-bottom {
  font-size: 13px;
  color: #D4AF37;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  margin-top: 3px;
}

/* Polierter Messing-Kugeltürknauf auf der rechten Seite */
.door-brass-knob {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFDF0 0%, #F5CE74 38%, #9E6F22 78%, #4A300C 100%);
  border: 1px solid #FFECAA;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.8);
  z-index: 10;
}

/* Türzustände: Gesperrt (100% blickdicht), Heutiges Türchen, Halboffen */
.door.is-locked {
  opacity: 1 !important;
  cursor: not-allowed;
  border-color: #8C6A28;
  filter: brightness(0.85);
}

.door.is-locked:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px #F6E29F, inset 0 0 0 3px #560D15, inset 0 0 14px rgba(0, 0, 0, 0.6);
}

/* Heutiges Türchen: Sanftes, einladendes Kerzenlicht-Pulsieren */
.door.is-current {
  box-shadow: 
    inset 0 0 0 1px #FFF0B6, 
    inset 0 0 0 3px #560D15, 
    0 0 28px 8px rgba(246, 226, 159, 0.65), 
    0 10px 28px rgba(0, 0, 0, 0.6);
  animation: currentDoorGlow 3s ease-in-out infinite alternate;
}

@keyframes currentDoorGlow {
  0% {
    box-shadow: 
      inset 0 0 0 1px #FFF0B6, 
      inset 0 0 0 3px #560D15, 
      0 0 16px 4px rgba(246, 226, 159, 0.45), 
      0 6px 18px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 
      inset 0 0 0 1px #FFF0B6, 
      inset 0 0 0 3px #560D15, 
      0 0 32px 10px rgba(246, 226, 159, 0.8), 
      0 12px 30px rgba(0, 0, 0, 0.65);
  }
}

/* GEÖFFNETE TÜREN: WEIT GEÖFFNET IM 3D-RAUM (EXAKT WIE AUF DEM FOTO!) */
.door.is-opened {
  transform: perspective(1100px) rotateY(-74deg);
  box-shadow: 18px 4px 34px rgba(0, 0, 0, 0.85), 0 0 16px rgba(212, 175, 55, 0.25);
  cursor: pointer;
}

.cabinet-cell:hover .door.is-opened,
.door.is-opened:hover {
  transform: perspective(1100px) rotateY(-78deg) scale(1.01);
  box-shadow: 22px 6px 40px rgba(0, 0, 0, 0.9), 0 0 22px rgba(246, 226, 159, 0.45);
}

.calendar-bottom { color: #d2bea4; }
.calendar-note::before { background: #e8c477; box-shadow: 0 0 11px rgba(232,196,119,.6); }

/* Responsive Grid */
@media (max-width: 900px) {
  .recipient-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; }
}
@media (max-width: 580px) {
  .recipient-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .cell-arch-frame, .door, .cell-interior { border-radius: 26px 26px 3px 3px; }
}

/* Elegante Festtags-Vorschauleiste mit Navigations- & Versende-Zentrale */
.calendar-preview-bar {
  max-width: 1060px;
  margin: 0 auto 28px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #2b1118 0%, #17090c 100%);
  border: 1px solid rgba(220, 181, 105, 0.55);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px rgba(255, 235, 180, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 20;
}

.preview-bar-left, .preview-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.preview-bar-center {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.preview-control-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.preview-edit-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(220, 181, 105, 0.45);
  color: #F8E5B7 !important;
}

.preview-edit-btn:hover {
  background: rgba(220, 181, 105, 0.2);
  border-color: #F6E29F;
  color: #FFF !important;
  transform: translateX(-2px);
}

.preview-share-btn {
  background: linear-gradient(135deg, #F6E29F 0%, #D4AF37 100%);
  border: 1px solid #FFF2C4;
  color: #2D1418 !important;
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}

.preview-share-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.55);
}

.mobile-preview-dock {
  display: none;
}

.preview-badge {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #F6E29F;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-pills {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.preview-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(220, 181, 105, 0.35);
  color: #FAF4E8;
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--sans);
}

.preview-pill:hover, .preview-pill.active {
  background: linear-gradient(135deg, #F6E29F 0%, #D4AF37 100%);
  color: #2D1418;
  font-weight: 600;
  border-color: #FFF0BD;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}

.preview-pill-all {
  background: rgba(184, 43, 57, 0.25);
  border-color: rgba(220, 181, 105, 0.6);
  color: #F8E5B7;
}

.preview-select-wrap select {
  background: #1B0C10;
  color: #F8E5B7;
  border: 1px solid rgba(220, 181, 105, 0.45);
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* ==========================================================================
   DAS WEIHNACHTS-BRIEF-MODAL MIT ROTEM WACHSSIEGEL
   ========================================================================== */
.modal-root, #modal-root:not(:empty), .modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 4, 6, 0.88);
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: fadeIn 0.25s ease-out;
  overflow-y: auto;
}

.modal-root > * {
  margin: auto;
}

/* ==========================================================================
   4. INTERACTIVE 3D UNBOXING ENVELOPE & WAX SEAL CRACK EXPERIENCE
   ========================================================================== */

.letter-unboxing-stage,
.letter-envelope-wrapper {
  position: relative;
  width: min(100%, 640px);
  max-width: 640px;
  margin: auto;
  perspective: 1400px;
}

.unboxing-interactive-unit {
  position: relative;
  width: 100%;
  perspective: 1400px;
  min-height: 400px;
}

/* 1. THE SEALED ENVELOPE (Shown initially before breaking) */
.envelope-sealed-front {
  position: relative;
  width: min(100%, 540px);
  min-height: 380px;
  margin: 20px auto;
  border-radius: 14px;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: visible;
  user-select: none;
  animation: envelopeFloatIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes envelopeFloatIn {
  0% {
    opacity: 0;
    transform: translateY(35px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.is-royal .envelope-sealed-front {
  background: linear-gradient(155deg, #440A12 0%, #250307 60%, #150204 100%);
  border: 2px solid #D4AF37;
  box-shadow: 
    0 35px 100px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 235, 175, 0.35),
    inset 0 0 40px rgba(0, 0, 0, 0.7);
}

.is-winter .envelope-sealed-front {
  background: linear-gradient(155deg, #162B44 0%, #0D1C2E 60%, #060E18 100%);
  border: 2px solid #9EC3E6;
  box-shadow: 
    0 35px 100px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(220, 240, 255, 0.35),
    inset 0 0 40px rgba(0, 0, 0, 0.7);
}

.envelope-sealed-body {
  position: relative;
  padding: 32px 28px;
  height: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Calligraphy on the Envelope */
.envelope-calligraphy-badge {
  text-align: left;
  padding: 8px 12px;
  z-index: 2;
}

.envelope-addressed-to {
  display: block;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.04em;
}

.is-royal .envelope-addressed-to {
  color: #E5C378;
}

.is-winter .envelope-addressed-to {
  color: #B4D7FA;
}

.envelope-recipient-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(26px, 5.5vw, 36px);
  font-weight: 600;
  line-height: 1.1;
  margin: 3px 0 5px;
}

.is-royal .envelope-recipient-title {
  color: #FFF2C4;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.is-winter .envelope-recipient-title {
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.envelope-sender-sub {
  display: block;
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
}

.is-royal .envelope-sender-sub {
  color: #D4AF37;
}

.is-winter .envelope-sender-sub {
  color: #9EC3E6;
}

/* Postmark Tag */
.envelope-postmark-tag {
  text-align: right;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  opacity: 0.8;
}

.is-royal .envelope-postmark-tag {
  color: #D4AF37;
}

.is-winter .envelope-postmark-tag {
  color: #9EC3E6;
}

/* The Triangular Flap of the Closed Envelope */
.envelope-closed-flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 185px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
  pointer-events: none;
}

.is-royal .envelope-closed-flap {
  background: linear-gradient(180deg, #38080E 0%, #200407 85%, #150204 100%);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

.is-winter .envelope-closed-flap {
  background: linear-gradient(180deg, #102136 0%, #081320 85%, #040910 100%);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

/* Interactive Wax Seal on the Sealed Envelope */
.wax-seal-hero-anchor {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.wax-seal-hero-disc {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.is-royal .wax-seal-hero-disc {
  background: radial-gradient(circle at 35% 30%, #E8364C 0%, #9E1929 65%, #520811 100%);
  border: 2.5px solid #F6E29F;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(220, 50, 70, 0.45),
    inset 0 1px 3px rgba(255, 255, 255, 0.7);
  color: #FFF2C4;
}

.is-winter .wax-seal-hero-disc {
  background: radial-gradient(circle at 35% 30%, #4E86BC 0%, #204C74 65%, #0B2238 100%);
  border: 2.5px solid #E2F0FD;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(100, 170, 230, 0.45),
    inset 0 1px 3px rgba(255, 255, 255, 0.8);
  color: #FFFFFF;
}

.wax-seal-hero-anchor:hover .wax-seal-hero-disc {
  transform: scale(1.1);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.75), 0 0 35px rgba(246, 226, 159, 0.6);
}

.seal-cracking-surface {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.seal-hero-crest {
  font-size: 32px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.seal-crack-jagged {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 48%, #FFF4D0 49%, #FFD700 51%, transparent 52%);
}

/* Callout Prompt Pill */
.seal-prompt-pill {
  margin-top: 14px;
  background: rgba(14, 6, 8, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: 9999px;
  padding: 7px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFF2C4;
  font-family: var(--serif);
  font-size: 13.5px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  animation: pulsePrompt 2s infinite ease-in-out;
}

.is-winter .seal-prompt-pill {
  background: rgba(6, 14, 24, 0.9);
  border-color: rgba(160, 205, 245, 0.6);
  color: #E1F0FD;
}

@keyframes pulsePrompt {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  }
  50% {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
  }
}

/* ==========================================================================
   BREAKING & UNBOXING TRANSITION PHASES
   ========================================================================== */

/* Phase 1: Breaking (Seal splits open with crack sound & confetti) */
.unboxing-interactive-unit.is-breaking .wax-seal-hero-disc {
  animation: sealBreakRupture 0.25s ease-out forwards;
}

.unboxing-interactive-unit.is-breaking .seal-crack-jagged {
  opacity: 1;
}

@keyframes sealBreakRupture {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) rotate(3deg); }
  80% { transform: scale(1.22) rotate(-3deg); }
  100% { transform: scale(1.1) rotate(0deg); opacity: 0.7; }
}

/* Phase 2: Opening (Flap rotates up, card slides out) */
.unboxing-interactive-unit.is-opening .envelope-closed-flap {
  transform: rotateX(176deg);
}

.unboxing-interactive-unit.is-opening .wax-seal-hero-anchor {
  opacity: 0;
  transform: translateX(-50%) scale(0.6);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.unboxing-interactive-unit.is-opening .envelope-sealed-front {
  transform: translateY(50px) scale(0.92);
  opacity: 0.15;
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.unboxing-interactive-unit.is-opening .luxury-passepartout-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  transition: all 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Phase 3: Opened (Letter is completely open and interactive) */
.unboxing-interactive-unit.is-opened .envelope-sealed-front {
  display: none;
}

.unboxing-interactive-unit.is-opened .luxury-passepartout-card {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* State when sealed: letter card is hidden inside/behind */
.unboxing-interactive-unit.is-sealed .luxury-passepartout-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  pointer-events: none;
}

.unboxing-interactive-unit.is-sealed .envelope-sealed-front {
  opacity: 1;
  pointer-events: auto;
}

/* THE LUXURY PASSEPARTOUT LETTER CARD */
.luxury-passepartout-card,
.royal-letter {
  position: relative;
  z-index: 3;
  border-radius: 8px;
  overflow: visible;
  animation: cardSlideOutEnvelope 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: center bottom;
}

@keyframes cardSlideOutEnvelope {
  0% {
    opacity: 0;
    transform: translateY(45px) scale(0.94);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Multi-layered Passepartout Relief Frame with Beveled Edge */
.passepartout-outer-frame {
  padding: 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.is-royal .passepartout-outer-frame {
  background: linear-gradient(155deg, #3A0A11 0%, #1D0306 100%);
  border: 2px solid #D4AF37;
  box-shadow: 
    0 35px 100px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 235, 175, 0.4),
    inset 0 0 25px rgba(0, 0, 0, 0.7);
}

.is-winter .passepartout-outer-frame {
  background: linear-gradient(155deg, #112236 0%, #060E18 100%);
  border: 2px solid #9EC3E6;
  box-shadow: 
    0 35px 100px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(220, 240, 255, 0.4),
    inset 0 0 25px rgba(0, 0, 0, 0.7);
}

/* Handmade Ivory Stationery Sheet */
.stationery-paper-sheet {
  background: linear-gradient(180deg, #FDFCF9 0%, #FAF5EC 50%, #F5EDE0 100%);
  color: #2D1A14;
  border-radius: 4px;
  box-shadow: 
    inset 0 0 0 1px rgba(180, 140, 75, 0.22),
    inset 0 2px 10px rgba(60, 30, 15, 0.05);
  position: relative;
  overflow: hidden;
}

.is-winter .stationery-paper-sheet {
  background: linear-gradient(180deg, #FDFDFE 0%, #F6FAFE 50%, #EDF4FB 100%);
  box-shadow: 
    inset 0 0 0 1px rgba(130, 175, 215, 0.25),
    inset 0 2px 10px rgba(20, 50, 90, 0.05);
}

/* Sculpted Crest Header (NO STOCK BANNER) */
.stationery-crest-header {
  text-align: center;
  padding: 34px 24px 18px;
  border-bottom: 1px solid rgba(180, 140, 75, 0.22);
  position: relative;
}

.is-royal .stationery-crest-header {
  background: radial-gradient(ellipse at 50% 0%, rgba(246, 226, 159, 0.32) 0%, transparent 72%);
  border-bottom-color: rgba(180, 140, 75, 0.22);
}

.is-winter .stationery-crest-header {
  background: radial-gradient(ellipse at 50% 0%, rgba(200, 230, 255, 0.38) 0%, transparent 72%);
  border-bottom-color: rgba(130, 175, 215, 0.25);
}

/* 3D Wax Seal Medallion */
.stationery-crest-seal,
.wax-seal-crest-top {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  user-select: none;
}

.is-royal .stationery-crest-seal,
.is-royal .wax-seal-crest-top {
  background: radial-gradient(circle at 35% 30%, #E33549 0%, #9C1929 65%, #560A12 100%);
  border: 2px solid #F6E29F;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 3px rgba(255, 255, 255, 0.6);
  color: #FFF2C4;
}

.is-winter .stationery-crest-seal,
.is-winter .wax-seal-crest-top {
  background: radial-gradient(circle at 35% 30%, #4E86BC 0%, #224E77 65%, #0E263E 100%);
  border: 2px solid #E2F0FD;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 3px rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
}

.stationery-crest-seal:hover,
.wax-seal-crest-top:hover {
  transform: scale(1.08);
}

.crest-seal-symbol,
.seal-crest-snowflake {
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  display: block;
}

.stationery-brand-tag,
.letter-crest-tag {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
}

.is-royal .stationery-brand-tag,
.is-royal .letter-crest-tag {
  color: #9E7431;
}

.is-winter .stationery-brand-tag,
.is-winter .letter-crest-tag {
  color: #3F6F9B;
}

.stationery-day-script,
.letter-day-pill {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
}

.is-royal .stationery-day-script,
.is-royal .letter-day-pill {
  color: #7D1A25;
}

.is-winter .stationery-day-script,
.is-winter .letter-day-pill {
  color: #1A3E66;
}

/* Stationery Body Content */
.stationery-body-content,
.letter-body {
  padding: 24px 34px 34px;
}

.letter-title {
  font-family: var(--serif);
  font-size: clamp(26px, 4.5vw, 36px);
  margin: 0 0 20px;
  text-align: center;
  font-weight: 500;
  line-height: 1.18;
}

.is-royal .letter-title {
  color: #36141A;
}

.is-winter .letter-title {
  color: #14283E;
}

/* Media Mounts */
.stationery-media-mount,
.letter-media-wrap {
  margin: 0 0 22px;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.stationery-photo-mat {
  background: #FFFFFF;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid rgba(180, 140, 75, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
}

.is-winter .stationery-photo-mat {
  border-color: rgba(130, 175, 215, 0.4);
}

.stationery-media-mount.is-photo.mode-contain img {
  width: auto;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
  border-radius: 3px;
}

.stationery-media-mount.is-photo.mode-cover img {
  width: 100%;
  max-height: 440px;
  object-fit: cover !important;
  display: block;
  border-radius: 3px;
}

.stationery-media-mount.is-video {
  background: #000;
  padding: 4px;
  border: 1.5px solid #D4AF37;
}

.is-winter .stationery-media-mount.is-video {
  border-color: #9EC3E6;
}

.stationery-media-mount.is-video video {
  width: 100%;
  max-height: 480px;
  object-fit: contain !important;
  display: block;
  background: #000;
  border-radius: 4px;
}

.stationery-audio-card {
  padding: 16px 20px;
  border-radius: 6px;
  margin-bottom: 22px;
}

.is-royal .stationery-audio-card {
  background: linear-gradient(135deg, #FAF4E6 0%, #F3E7CD 100%);
  border: 1.5px solid #D4AF37;
  box-shadow: inset 0 0 14px rgba(212, 175, 55, 0.15);
}

.is-winter .stationery-audio-card {
  background: linear-gradient(135deg, #F4F9FD 0%, #E3EFFB 100%);
  border: 1.5px solid #9EC3E6;
  box-shadow: inset 0 0 14px rgba(158, 195, 230, 0.15);
}

.stationery-audio-tag {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 600;
  display: block;
}

.is-royal .stationery-audio-tag {
  color: #7D1A25;
}

.is-winter .stationery-audio-tag {
  color: #1A3E66;
}

/* Voucher Ticket */
.stationery-voucher-ticket,
.letter-voucher-box {
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  position: relative;
  margin-bottom: 22px;
}

.is-royal .stationery-voucher-ticket,
.is-royal .letter-voucher-box {
  background: linear-gradient(135deg, #FFFDF8 0%, #FAF1DC 100%);
  border: 2px dashed #D4AF37;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.is-winter .stationery-voucher-ticket,
.is-winter .letter-voucher-box {
  background: linear-gradient(135deg, #F8FBFE 0%, #E8F2FC 100%);
  border: 2px dashed #9EC3E6;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.voucher-ribbon-tag {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}

.is-royal .voucher-ribbon-tag {
  color: #8C222F;
}

.is-winter .voucher-ribbon-tag {
  color: #1B4E7C;
}

.voucher-title {
  margin: 0 0 10px;
  font-weight: 500;
}

.voucher-content {
  line-height: 1.7;
}

/* Action Links */
.stationery-link-card,
.letter-link-action-card {
  margin: 18px 0;
  text-align: center;
}

.stationery-link-btn,
.letter-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 9999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.is-royal .stationery-link-btn,
.is-royal .letter-action-btn {
  background: linear-gradient(135deg, #FAF0D2 0%, #D4AF37 100%);
  color: #2D050B;
  border: 1px solid #F6E29F;
}

.is-winter .stationery-link-btn,
.is-winter .letter-action-btn {
  background: linear-gradient(135deg, #FFFFFF 0%, #A9D1F4 100%);
  color: #0B223B;
  border: 1px solid #D8ECFD;
}

.stationery-link-btn:hover,
.letter-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.stationery-link-url,
.letter-action-url-hint {
  display: block;
  font-size: 11px;
  opacity: 0.65;
  margin-top: 4px;
}

/* Personal Message Content */
.stationery-message-text,
.letter-message-content {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.85;
  color: #432E27;
  white-space: pre-wrap;
  margin: 18px 0 24px;
}

.is-winter .stationery-message-text,
.is-winter .letter-message-content {
  color: #25384D;
}

/* Signature Row */
.stationery-signature-row,
.letter-signature-block {
  text-align: right;
  border-top: 1px solid rgba(180, 140, 75, 0.25);
  padding-top: 16px;
  margin-bottom: 26px;
}

.is-winter .stationery-signature-row,
.is-winter .letter-signature-block {
  border-top-color: rgba(130, 175, 215, 0.3);
}

.signature-intro,
.letter-signature-block em {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: #8A7268;
  margin-bottom: 3px;
}

.is-winter .signature-intro,
.is-winter .letter-signature-block em {
  color: #5D7896;
}

.signature-name,
.letter-signature-block strong {
  display: block;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
}

.is-royal .signature-name,
.is-royal .letter-signature-block strong {
  color: #7D1A25;
}

.is-winter .signature-name,
.is-winter .letter-signature-block strong {
  color: #1A3E66;
}

/* Hand-Stamped Wax Seal Reactions Directly on the Paper */
.stationery-stamp-reactions {
  margin-top: 28px;
  padding-top: 6px;
}

.stamp-reactions-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}

.stamp-header-rule {
  flex: 1;
  height: 1px;
}

.is-royal .stamp-header-rule {
  background: rgba(180, 140, 75, 0.3);
}

.is-winter .stamp-header-rule {
  background: rgba(130, 175, 215, 0.35);
}

.stamp-header-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.is-royal .stamp-header-label {
  color: #7D5C50;
}

.is-winter .stamp-header-label {
  color: #4A6987;
}

.stamp-badges-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.stamp-reaction-badge,
.reaction-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.stamp-reaction-badge:hover,
.reaction-btn:hover {
  transform: translateY(-2px);
}

.stamp-seal-disc {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.is-royal .stamp-seal-disc {
  background: radial-gradient(circle at 35% 30%, #FDF8F0 0%, #EFE3D0 80%, #DECDB4 100%);
  border: 1.5px solid rgba(165, 115, 55, 0.45);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 3px 8px rgba(70, 30, 10, 0.08);
}

.is-winter .stamp-seal-disc {
  background: radial-gradient(circle at 35% 30%, #F5F9FE 0%, #E1EDFA 80%, #CADDF0 100%);
  border: 1.5px solid rgba(100, 155, 210, 0.45);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), 0 3px 8px rgba(10, 40, 80, 0.08);
}

.is-royal .stamp-reaction-badge:hover .stamp-seal-disc {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(125, 26, 37, 0.25);
  border-color: #D4AF37;
}

.is-winter .stamp-reaction-badge:hover .stamp-seal-disc {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(35, 95, 155, 0.25);
  border-color: #79AEDE;
}

/* Reacted State (Vibrant Sealing Wax Impression) */
.stamp-reaction-badge.reacted .stamp-seal-disc,
.reaction-btn.reacted .stamp-seal-disc {
  animation: stampPressPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.12);
}

.is-royal .stamp-reaction-badge.reacted .stamp-seal-disc,
.is-royal .reaction-btn.reacted .stamp-seal-disc {
  background: radial-gradient(circle at 35% 30%, #E2374B 0%, #9E1928 65%, #560A12 100%) !important;
  border: 2px solid #F6E29F !important;
  box-shadow: 0 6px 20px rgba(158, 25, 40, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.6) !important;
}

.is-winter .stamp-reaction-badge.reacted .stamp-seal-disc,
.is-winter .reaction-btn.reacted .stamp-seal-disc {
  background: radial-gradient(circle at 35% 30%, #3B7FB9 0%, #1A4E7A 65%, #0A243D 100%) !important;
  border: 2px solid #E1F0FD !important;
  box-shadow: 0 6px 20px rgba(30, 90, 150, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.7) !important;
}

@keyframes stampPressPop {
  0% { transform: scale(0.9); }
  60% { transform: scale(1.22); }
  100% { transform: scale(1.12); }
}

.stamp-seal-icon {
  font-size: 21px;
  line-height: 1;
  transition: transform 0.2s;
}

.stamp-seal-caption {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  transition: color 0.2s;
}

.is-royal .stamp-seal-caption {
  color: #5A352D;
}

.is-winter .stamp-seal-caption {
  color: #1A3E66;
}

.is-royal .stamp-reaction-badge.reacted .stamp-seal-caption,
.is-royal .reaction-btn.reacted .stamp-seal-caption {
  color: #8C222F;
  font-weight: 700;
}

.is-winter .stamp-reaction-badge.reacted .stamp-seal-caption,
.is-winter .reaction-btn.reacted .stamp-seal-caption {
  color: #1B4E7C;
  font-weight: 700;
}
.toast { color: #2c1710; background: linear-gradient(135deg,#f8e5b7,#d5ae64); }
.empty-state { color: #fff0dc; }
.empty-state p, .loading { color: #d1bda3; }
@keyframes currentDoor {
  0%,100% { box-shadow: inset 0 0 0 4px #6b1a22,inset 0 0 0 6px #f4d993,0 0 20px 2px rgba(249,204,104,.28),0 7px 20px rgba(0,0,0,.3); }
  50% { box-shadow: inset 0 0 0 4px #6b1a22,inset 0 0 0 6px #f4d993,0 0 31px 8px rgba(249,204,104,.48),0 7px 20px rgba(0,0,0,.3); }
}
@media (max-width: 900px) { .home-hero { min-height: auto; padding-top: 58px; padding-bottom: 68px; } }
@media (max-width: 680px) {
  .site-header { background: rgba(23,13,16,.97); }
  .brand { font-size: 20px; }
  .home-hero { grid-template-columns: 1fr; padding: 48px 20px 58px; gap: 31px; }
  .hero-copy::before { margin-bottom: 18px; font-size: 9px; }
  .hero-copy h1 { font-size: clamp(54px,14vw,72px); line-height: .98; }
  .hero-copy p { font-size: 14px; }
  .hero-art { padding: 6px; }
  .hero-art img { aspect-ratio: 1 / 1; }
  .hero-caption { font-size: 9px; }
  .hero-corner { width: 44px; height: 44px; top: -14px; right: -10px; }
  .intro-band { padding: 54px 23px 58px; }
  .intro-band::before, .intro-band::after { font-size: 85px; }
  .steps-section { padding-top: 60px; padding-bottom: 65px; }
  .steps-heading h2 { font-size: 44px; }
  .step + .step { border-bottom-color: rgba(220,181,105,.24); }
  .recipient-cover { padding: 7px; }
  .recipient-cover-inner { padding: 17px 11px; }
  .editor-page { padding-top: 30px; }
  .editor-top h1 { font-size: 42px; }
  .door-modal { border-width: 5px; }
  .modal-content { padding-top: 26px; }
  .closing-note { margin-bottom: 60px; }
}

/* ==========================================================================
   FESTIVE AUDIO & MUSIC TOGGLE IN SITE HEADER
   ========================================================================== */
.music-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(45, 23, 16, 0.7);
  border: 1px solid rgba(220, 181, 105, 0.45);
  color: #f2d99f;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.music-toggle-btn:hover {
  border-color: #f5d384;
  background: rgba(65, 33, 24, 0.85);
  box-shadow: 0 0 16px rgba(220, 181, 105, 0.35);
  transform: translateY(-1px);
}

.music-toggle-btn.is-playing {
  border-color: #f5d384;
  background: linear-gradient(135deg, rgba(84, 16, 27, 0.85), rgba(45, 23, 16, 0.9));
  box-shadow: 0 0 18px rgba(245, 211, 132, 0.35), inset 0 0 12px rgba(245, 211, 132, 0.15);
  color: #fff2de;
}

.music-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 12px;
}

.music-bars .bar {
  width: 2.5px;
  background: #f2d99f;
  border-radius: 1px;
  transition: height 0.2s ease;
}

.music-bars .bar:nth-child(1) { height: 5px; }
.music-bars .bar:nth-child(2) { height: 10px; }
.music-bars .bar:nth-child(3) { height: 7px; }

.music-toggle-btn.is-playing .music-bars .bar:nth-child(1) {
  animation: musicBarJump 0.85s ease-in-out infinite alternate;
}

.music-toggle-btn.is-playing .music-bars .bar:nth-child(2) {
  animation: musicBarJump 0.65s ease-in-out 0.2s infinite alternate;
}

.music-toggle-btn.is-playing .music-bars .bar:nth-child(3) {
  animation: musicBarJump 0.95s ease-in-out 0.35s infinite alternate;
}

@keyframes musicBarJump {
  0% { height: 3px; }
  100% { height: 12px; }
}

/* ==========================================================================
   AI INSPIRATION PILL IN DOOR EDITOR
   ========================================================================== */
.day-editor-stamp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ai-inspire-pill-btn {
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(220, 181, 105, 0.22), rgba(84, 16, 27, 0.4));
  border: 1px solid rgba(245, 211, 132, 0.6);
  color: #fcedcb;
  font-family: var(--serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.22s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.ai-inspire-pill-btn:hover {
  background: linear-gradient(135deg, rgba(245, 211, 132, 0.4), rgba(120, 24, 39, 0.6));
  box-shadow: 0 0 14px rgba(245, 211, 132, 0.4);
  transform: translateY(-1px);
  color: #ffffff;
}

/* ==========================================================================
   AUTOFILL MODAL & CURATED LUXURY PACKS
   ========================================================================== */
.autofill-modal-card {
  width: min(840px, 94vw);
  max-height: 90vh;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 0%, #2f131a 0%, #15090d 100%);
  border: 2px solid #dcb569;
  border-radius: 8px;
  padding: 36px 32px;
  color: #fff0db;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 50px rgba(220, 181, 105, 0.18);
  position: relative;
}

.autofill-packs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 28px 0 20px;
  text-align: left;
}

.autofill-pack-card {
  background: rgba(30, 13, 17, 0.85);
  border: 1px solid rgba(220, 181, 105, 0.35);
  border-radius: 6px;
  padding: 22px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.28s ease;
  position: relative;
  overflow: hidden;
}

.autofill-pack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(220, 181, 105, 0.14), transparent 70%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.autofill-pack-card:hover {
  transform: translateY(-3px);
  border-color: #f5d384;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 24px rgba(220, 181, 105, 0.25);
}

.autofill-pack-card:hover::before {
  opacity: 1;
}

.pack-badge {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: #f5d384;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.pack-desc {
  font-size: 13px;
  line-height: 1.55;
  color: #d8c2ad;
  margin: 0 0 16px;
  min-height: 58px;
}

.pack-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: #ecd5ba;
  margin-bottom: 18px;
  border-top: 1px solid rgba(220, 181, 105, 0.18);
  padding-top: 12px;
}

.pack-apply-btn {
  width: 100%;
}

.autofill-modal-note {
  font-size: 12px;
  color: #ba9e89;
  margin-top: 14px;
}

/* ==========================================================================
   AI SUGGESTIONS MODAL
   ========================================================================== */
.ai-modal-card {
  width: min(680px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 0%, #2b1219 0%, #15090d 100%);
  border: 2px solid #dcb569;
  border-radius: 8px;
  padding: 34px 28px;
  color: #fff0db;
  text-align: center;
  position: relative;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(220, 181, 105, 0.18);
}

.ai-suggestions-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
  text-align: left;
}

.ai-sug-item {
  background: rgba(36, 17, 22, 0.8);
  border: 1px solid rgba(220, 181, 105, 0.3);
  border-radius: 6px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.22s ease;
}

.ai-sug-item:hover {
  border-color: #f5d384;
  background: rgba(48, 22, 28, 0.9);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.ai-sug-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ai-sug-type {
  font-size: 11px;
  font-weight: 600;
  color: #f5d384;
  background: rgba(220, 181, 105, 0.15);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.04em;
}

.ai-sug-title {
  font-family: var(--serif);
  font-size: 16px;
  color: #fff2de;
  margin: 0;
}

.ai-sug-body {
  font-size: 13px;
  line-height: 1.6;
  color: #dccebe;
  margin: 0;
  white-space: pre-line;
}

.ai-sug-link {
  font-size: 12px;
  color: #f5d384;
  font-style: italic;
}

.ai-sug-apply-btn {
  align-self: flex-start;
  margin-top: 4px;
}

/* ==========================================================================
   PAYWALL & CHECKOUT CARD
   ========================================================================== */
.paywall-pricing-card {
  margin: 20px 0 10px;
  background: linear-gradient(135deg, rgba(84, 16, 27, 0.5), rgba(30, 13, 17, 0.85));
  border: 1px solid #dcb569;
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: inset 0 0 20px rgba(220, 181, 105, 0.08);
}

.paywall-price-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.paywall-price-tag .price-val {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  color: #fcedcb;
  letter-spacing: -0.02em;
  text-shadow: 0 0 16px rgba(220, 181, 105, 0.4);
}

.paywall-price-tag .price-type {
  font-size: 11px;
  color: #d1b79f;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}

.paywall-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  font-size: 13px;
  color: #ebd7c2;
  border-top: 1px solid rgba(220, 181, 105, 0.2);
  border-bottom: 1px solid rgba(220, 181, 105, 0.2);
  padding: 14px 6px;
}

.paywall-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.paywall-unlock-btn {
  width: 100%;
  font-size: 15px;
  padding: 14px 22px;
}

.test-unlock-btn {
  font-size: 11px;
  color: #dfbd7d;
  opacity: 0.85;
}

.test-unlock-btn:hover {
  opacity: 1;
  color: #fff;
}

.status-indicator-dot.paid {
  background: #4ade80;
  box-shadow: 0 0 10px #4ade80;
}

/* ==========================================================================
   UNPAID RECIPIENT TEASER LOCK SCREEN
   ========================================================================== */
.unpaid-recipient-card {
  max-width: 600px;
  margin: 40px auto;
  background: radial-gradient(circle at 50% 0%, #2b1219 0%, #15090d 100%);
  border: 2px solid #dcb569;
  border-radius: 8px;
  padding: 48px 32px;
  color: #fff0db;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(220, 181, 105, 0.18);
}

.unpaid-title {
  font-family: var(--serif);
  font-size: 28px;
  margin: 18px 0 12px;
  color: #fcedcb;
}

.unpaid-sub {
  font-size: 15px;
  line-height: 1.7;
  color: #d5c1a8;
  margin: 0 0 28px;
}

.unpaid-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* ==========================================================================
   KALENDER-EINSTELLUNGEN & TITEL-MODAL
   ========================================================================== */
.calendar-settings-modal-card {
  width: min(94vw, 640px);
  max-height: 90vh;
  overflow-y: auto;
  background: radial-gradient(circle at 50% 0%, #2b1219 0%, #15090d 100%);
  border: 2px solid #dcb569;
  border-radius: 12px;
  padding: 34px 28px;
  color: #fff0db;
  text-align: center;
  position: relative;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(220, 181, 105, 0.18);
}

.settings-headline-preview-box {
  background: rgba(18, 5, 8, 0.85);
  border: 1.5px solid rgba(220, 181, 105, 0.45);
  border-radius: 8px;
  padding: 20px 16px;
  margin: 18px 0 24px;
  text-align: center;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.65), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.settings-preview-label {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #f5d384;
  text-transform: uppercase;
  display: block;
  margin-bottom: 12px;
  opacity: 0.9;
}

.settings-headline-preview {
  font-family: var(--serif);
  font-size: clamp(22px, 4.5vw, 34px);
  line-height: 1.25;
  color: #fff0dc;
}

.settings-headline-preview span {
  color: #e8c477;
  font-style: italic;
  display: inline-block;
}

.settings-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.settings-grid-3 .field {
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  height: 100% !important;
}

.settings-grid-3 .field label {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: flex-end !important;
  margin-bottom: 6px !important;
}

.settings-grid-3 .field input {
  margin-top: auto !important;
  height: 44px !important;
  box-sizing: border-box !important;
}

.settings-section .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

.settings-section .form-grid .field {
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.settings-section .form-grid .field label {
  line-height: 1.25 !important;
  min-height: 24px !important;
  display: flex !important;
  align-items: flex-end !important;
  margin-bottom: 6px !important;
}

.settings-section .form-grid .field input {
  margin-top: auto !important;
  height: 44px !important;
  box-sizing: border-box !important;
}

.settings-section {
  text-align: left;
  background: rgba(28, 10, 15, 0.65);
  border: 1px solid rgba(220, 181, 105, 0.25);
  border-radius: 8px;
  padding: 18px 16px;
  margin-bottom: 18px;
}

.settings-section-title {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #f5d384;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.preview-pill-edit {
  background: rgba(220, 181, 105, 0.18);
  border-color: rgba(220, 181, 105, 0.6);
  color: #F8E5B7;
}

.preview-pill-edit:hover {
  background: #7D1A25;
  border-color: #F6E29F;
  color: #FFF5E3;
}

/* ==========================================================================
   UNIVERSAL FLOATING MODAL CLOSE BUTTON & TOUCH DEFAULTS
   ========================================================================== */
.modal-close,
.letter-envelope-wrapper .modal-close,
.share-modal-card .modal-close,
.autofill-modal-card .modal-close,
.ai-modal-card .modal-close,
.calendar-settings-modal-card .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 50;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(26, 8, 12, 0.88);
  border: 1.5px solid #dcb569;
  color: #fff2de;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.modal-close:hover,
.letter-envelope-wrapper .modal-close:hover,
.share-modal-card .modal-close:hover,
.autofill-modal-card .modal-close:hover,
.ai-modal-card .modal-close:hover,
.calendar-settings-modal-card .modal-close:hover {
  background: #7D1A25;
  border-color: #f5d384;
  transform: scale(1.08);
}

button, .button, a, input, select, textarea, label,
.door, .cell-interior, .envelope-hotspot, .preview-pill,
.editor-day, .wax-seal-crest-top, .reaction-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   TABLET & IPAD OPTIMISATIONS (601px bis 1024px)
   ========================================================================== */
@media (min-width: 601px) and (max-width: 1024px) {
  .recipient-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 12px !important;
  }
  .cabinet-cell {
    aspect-ratio: 1 / 1.36 !important;
  }
  .cell-arch-frame, .door, .cell-interior {
    border-radius: 28px 28px 4px 4px !important;
  }
  .door-number {
    font-size: 27px !important;
  }
  .door-brass-knob {
    width: 12px !important;
    height: 12px !important;
    right: 8px !important;
  }
  .letter-envelope-wrapper {
    width: min(92vw, 580px) !important;
  }
  .letter-unboxing-header {
    height: 135px !important;
  }
  .editor-layout {
    grid-template-columns: 1fr !important;
  }
  .editor-day-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .day-editor-panel {
    grid-template-columns: 130px 1fr !important;
    gap: 18px !important;
    padding: 22px !important;
  }
  .autofill-packs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .calendar-preview-bar {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}

/* ==========================================================================
   MOBILE & SMARTPHONE OPTIMISATIONS (bis 600px)
   ========================================================================== */
@media (max-width: 600px) {
  body {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* 1. Header & Navigation */
  .site-header {
    height: auto !important;
    min-height: 56px !important;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)) !important;
    gap: 6px !important;
  }
  .brand {
    font-size: 16px !important;
    gap: 6px !important;
  }
  .brand-mark {
    width: 22px !important;
    height: 22px !important;
  }
  .header-actions {
    gap: 5px !important;
  }
  .music-toggle-btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  .music-text {
    display: none !important;
  }
  .language-control select {
    max-width: 58px !important;
    padding: 5px 3px !important;
    font-size: 11px !important;
  }
  .header-actions .button-small {
    padding: 7px 10px !important;
    font-size: 11px !important;
  }

  /* 2. Recipient Kalender-Kabinett (3 Spalten) */
  .recipient-page {
    padding-top: 18px !important;
  }
  .recipient-heading {
    margin-bottom: 20px !important;
    padding: 0 10px !important;
  }
  .recipient-heading h1 {
    font-size: clamp(36px, 10vw, 48px) !important;
    line-height: 1.05 !important;
  }
  .recipient-heading p {
    font-size: 14px !important;
  }
  .recipient-cover-portrait-wrap {
    margin: 0 12px 18px !important;
  }
  .recipient-cover {
    padding: 6px !important;
    border-radius: 6px !important;
    margin: 0 8px 20px !important;
  }
  .recipient-cover-inner {
    padding: 12px 7px !important;
    border-radius: 4px !important;
  }
  .recipient-cover-inner::before {
    inset: 5px !important;
  }
  .recipient-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px 6px !important;
  }
  .cabinet-cell {
    aspect-ratio: 1 / 1.34 !important;
  }
  .cell-arch-frame, .door, .cell-interior {
    border-radius: 20px 20px 3px 3px !important;
  }
  .door {
    padding: 4px !important;
    border-width: 2px !important;
  }
  .door-number {
    font-size: clamp(19px, 5.2vw, 24px) !important;
    margin: 1px 0 !important;
  }
  .door-snowflake-top {
    font-size: 11px !important;
    margin-bottom: 1px !important;
  }
  .door-rosette-bottom {
    font-size: 10px !important;
    margin-top: 1px !important;
  }
  .door-brass-knob {
    width: 9px !important;
    height: 9px !important;
    right: 5px !important;
  }
  .cell-hinge {
    width: 4px !important;
    height: 13px !important;
    left: -2px !important;
  }
  .cell-latch-plate {
    width: 3px !important;
    height: 13px !important;
    right: -1px !important;
  }
  .door.is-opened {
    transform: perspective(900px) rotateY(-72deg) !important;
    box-shadow: 10px 3px 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(212, 175, 55, 0.25) !important;
  }
  .calendar-bottom {
    padding: 0 12px !important;
    font-size: 12px !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
  }

  /* 3. Vorschau-Leiste (Horizontales Wischen ohne Umbruch) */
  .calendar-preview-bar {
    padding: 12px 14px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 8px 20px !important;
  }
  .preview-bar-left, .preview-bar-right {
    width: 100% !important;
    display: flex !important;
  }
  .preview-bar-left .preview-control-btn, .preview-bar-right .preview-control-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }
  .preview-bar-center {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  /* Schwebende mobile Schnell-Navigationsleiste am Bildschirmrand */
  .mobile-preview-dock {
    display: flex !important;
    position: fixed !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 100 !important;
    gap: 10px !important;
    padding: 10px !important;
    background: rgba(28, 9, 13, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid rgba(220, 181, 105, 0.65) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.85), 0 0 20px rgba(212, 175, 55, 0.3) !important;
  }
  .mobile-preview-dock .dock-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 10px !important;
    min-height: 46px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .mobile-preview-dock .dock-btn > span {
    min-width: 0;
  }
  .mobile-preview-dock .dock-edit-btn {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(220, 181, 105, 0.5) !important;
    color: #F8E5B7 !important;
  }
  .mobile-preview-dock .dock-share-btn {
    background: linear-gradient(135deg, #F6E29F 0%, #D4AF37 100%) !important;
    border: 1px solid #FFF2C4 !important;
    color: #2D1418 !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4) !important;
  }
  .recipient-page {
    padding-bottom: 96px !important;
  }
  /* Bearbeiten & Verschenken liegen auf dem Handy schon im Dock unten */
  .preview-bar-left,
  .preview-bar-right .preview-share-btn {
    display: none !important;
  }
  .preview-bar-right {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .preview-font-toggle-wrap,
  .preview-font-select {
    width: 100% !important;
  }
  .preview-badge {
    font-size: 10px !important;
  }
  .preview-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 6px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }
  .preview-pills::-webkit-scrollbar {
    display: none !important;
  }
  .preview-pill {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  .preview-select-wrap select {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 14px !important;
    background: #250F15 !important;
  }

  /* 4. Das Weihnachts-Brief-Modal & Unboxing */
  .modal-root {
    padding: max(10px, env(safe-area-inset-top)) 8px max(14px, env(safe-area-inset-bottom)) !important;
  }
  .letter-unboxing-stage,
  .letter-envelope-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .envelope-unboxing-shell {
    padding-top: 10px !important;
  }
  .envelope-flap-top {
    height: 48px !important;
  }
  .passepartout-outer-frame {
    padding: 6px !important;
  }
  .stationery-crest-header {
    padding: 24px 14px 14px !important;
  }
  .stationery-crest-seal,
  .wax-seal-crest-top {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 8px !important;
    bottom: -22px !important;
  }
  .crest-seal-symbol,
  .seal-crest-snowflake {
    font-size: 20px !important;
  }
  .stationery-brand-tag,
  .letter-crest-tag {
    font-size: 9px !important;
    letter-spacing: 0.16em !important;
  }
  .stationery-day-script,
  .letter-day-pill {
    font-size: 13px !important;
  }
  .stationery-body-content,
  .letter-body {
    padding: 18px 14px 20px !important;
  }
  .letter-title {
    font-size: clamp(21px, 6vw, 27px) !important;
    margin: 0 0 14px !important;
  }
  .stationery-media-mount,
  .letter-media-wrap {
    margin: 0 0 16px !important;
  }
  .stationery-media-mount img, .stationery-media-mount video,
  .letter-media-wrap img, .letter-media-wrap video {
    max-height: 250px !important;
  }
  .stationery-message-text,
  .letter-message-content {
    font-size: 16px !important;
    line-height: 1.65 !important;
    margin: 14px 0 18px !important;
  }
  .stationery-voucher-ticket,
  .letter-voucher-box {
    padding: 16px 12px !important;
    margin-bottom: 16px !important;
  }
  .voucher-ribbon-tag {
    font-size: 10px !important;
  }
  .stationery-link-btn,
  .letter-action-btn {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 14px !important;
    padding: 11px 14px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .stationery-signature-row,
  .letter-signature-block {
    font-size: 17px !important;
    padding-top: 12px !important;
    margin-bottom: 18px !important;
  }
  .stamp-reactions-header {
    margin: 0 0 12px !important;
  }
  .stamp-header-label {
    font-size: 12px !important;
  }
  .stamp-badges-row {
    gap: 12px !important;
  }
  .stamp-seal-disc {
    width: 44px !important;
    height: 44px !important;
  }
  .stamp-seal-icon {
    font-size: 19px !important;
  }
  .stamp-seal-caption {
    font-size: 11px !important;
  }

  /* 5. Editor-Ansicht & Kalender-Erstellung */
  .editor-page {
    padding: 20px 10px 60px !important;
  }
  .editor-top {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    text-align: center !important;
  }
  .editor-top h1 {
    font-size: clamp(26px, 7.5vw, 36px) !important;
    margin: 0 0 6px !important;
  }
  .editor-top p {
    font-size: 13px !important;
  }
  .editor-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .editor-actions .button {
    padding: 10px 4px !important;
    font-size: 11px !important;
    min-height: 42px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  .days-editor-head {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 14px !important;
  }
  .days-editor-head h2 {
    font-size: 20px !important;
    margin: 0 !important;
  }
  .days-editor-head p {
    display: none !important;
  }
  .editor-day-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 18px !important;
  }
  .editor-day {
    min-height: 52px !important;
    padding: 6px 4px !important;
    border-radius: 6px !important;
  }
  .editor-day-top {
    justify-content: space-between !important;
  }
  .editor-day-num {
    font-size: 15px !important;
  }
  .editor-day-icon {
    font-size: 12px !important;
  }
  .editor-day-title {
    font-size: 9px !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
  }
  .day-editor-panel {
    grid-template-columns: 1fr !important;
    padding: 16px 12px !important;
    border-radius: 8px !important;
    gap: 14px !important;
  }
  .day-editor-stamp {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
  }
  .stamp-num {
    font-size: 26px !important;
  }
  .ai-inspire-pill-btn {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 38px !important;
  }
  .day-editor-fields {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .day-editor-fields .field {
    margin-bottom: 0 !important;
  }
  .day-editor-fields .field-full {
    grid-column: auto !important;
  }
  
  /* Schutz vor unerwünschtem iOS-Safari-Zoom bei Formulareingaben */
  .field input, .field textarea, .field select, .preview-select-wrap select {
    font-size: 16px !important;
  }
  .upload-label {
    min-height: 44px !important;
    padding: 12px !important;
    font-size: 13px !important;
  }
  .save-row {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 6px !important;
  }
  #save-door-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
    justify-content: center !important;
  }

  /* Formular zur Kalendererstellung */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .progress-line {
    gap: 6px !important;
    font-size: 10px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .progress-track {
    min-width: 16px !important;
  }

  /* 6. Teilen-Modal, Vorlagen-Modal, Einstellungen & KI-Inspirations-Modal */
  .share-modal-card, .autofill-modal-card, .ai-modal-card, .calendar-settings-modal-card {
    width: calc(100vw - 20px) !important;
    max-width: 100% !important;
    padding: 26px 14px 20px !important;
    margin: auto !important;
    border-radius: 10px !important;
  }
  .settings-grid-3 {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .share-link-box {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .share-link-input {
    width: 100% !important;
    font-size: 14px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  .share-link-box .button {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
  .whatsapp-share-btn {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 14px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  .share-qr-section {
    padding: 14px 10px !important;
  }
  .share-qr-img {
    width: 150px !important;
    height: 150px !important;
  }
  .autofill-packs-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .autofill-pack-card {
    padding: 16px 14px !important;
  }
  .pack-desc {
    min-height: auto !important;
    margin-bottom: 12px !important;
  }
  .pack-apply-btn {
    min-height: 44px !important;
  }
  .ai-sug-item {
    padding: 14px 12px !important;
  }
  .ai-sug-apply-btn {
    width: 100% !important;
    min-height: 42px !important;
  }
  .paywall-pricing-card {
    padding: 18px 14px !important;
  }
  .paywall-price-tag .price-val {
    font-size: 34px !important;
  }
  .paywall-unlock-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }
  .unpaid-recipient-card {
    margin: 20px 10px !important;
    padding: 32px 16px !important;
  }
  .unpaid-title {
    font-size: 24px !important;
  }
  .unpaid-actions .button {
    width: 100% !important;
    min-height: 48px !important;
  }
}

/* ==========================================================================
   SHOWCASE: DIE ZWEI KALENDER-MODELLE AUF DER STARTSEITE
   ========================================================================== */
.models-showcase-section {
  max-width: 1100px;
  margin: 64px auto 40px;
  padding: 0 20px;
  text-align: center;
}
.models-showcase-header {
  margin-bottom: 36px;
}
.models-kicker {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #F6E29F;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 8px;
}
.models-showcase-header h2 {
  font: 700 clamp(28px, 4vw, 42px)/1.15 'Cinzel', var(--serif);
  color: #FFF8DC;
  margin: 0 0 12px;
}
.models-showcase-header p {
  color: #d5c1a8;
  font-size: 16px;
  max-width: 640px;
  margin: 0 auto;
}
.models-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}
.model-card {
  background: radial-gradient(circle at 50% 0%, #2b1118 0%, #15080c 100%);
  border: 2px solid #D4AF37;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(212, 175, 55, 0.2);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-align: left;
}
.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(246, 226, 159, 0.4);
  border-color: #FFF2C4;
}
.model-card-winter {
  background: radial-gradient(circle at 50% 0%, #152E44 0%, #0A1724 100%);
  border-color: #6EA8D4;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 25px rgba(110, 168, 212, 0.25);
}
.model-card-winter:hover {
  border-color: #BBE1FF;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(165, 214, 255, 0.5);
}
.model-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  background: linear-gradient(135deg, #7D1A25, #4D0911);
  border: 1px solid #F6E29F;
  color: #FFF8DC;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 5px 12px;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.model-badge-new {
  background: linear-gradient(135deg, #1A4D6B, #0E2938);
  border-color: #92D7FF;
  color: #E2F4FF;
}
.model-media-frame {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: #000;
}
.model-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.4s ease;
}
.model-card:hover .model-preview-img {
  transform: scale(1.05);
}
.model-overlay-tag {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(10, 4, 6, 0.82);
  border: 1px solid rgba(220, 181, 105, 0.5);
  border-radius: 4px;
  color: #F6E29F;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 4px 8px;
}
.model-card-winter .model-overlay-tag {
  background: rgba(8, 18, 30, 0.85);
  border-color: rgba(146, 215, 255, 0.5);
  color: #BEE3FF;
}
.model-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.model-body h3 {
  font: 700 22px 'Cinzel', var(--serif);
  color: #FFF8DC;
  margin: 0 0 10px;
}
.model-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #d5c1a8;
  margin: 0 0 16px;
}
.model-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: #EBD6BD;
}
.model-perks li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.model-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.model-body .button {
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   THEME-PICKER (IN ERSTELLUNGSFORMULAR & EINSTELLUNGS-MODAL)
   ========================================================================== */
.theme-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.theme-picker-card {
  position: relative;
  background: rgba(18, 5, 8, 0.85);
  border: 2px solid rgba(220, 181, 105, 0.35);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.theme-picker-card input[type="radio"] {
  position: absolute;
  top: 12px;
  right: 12px;
  accent-color: #D4AF37;
  width: 18px;
  height: 18px;
  cursor: pointer;
  z-index: 5;
}
.theme-picker-card:hover {
  border-color: #F6E29F;
  background: rgba(220, 181, 105, 0.1);
}
.theme-picker-card.active, .theme-picker-card:has(input[type="radio"]:checked) {
  border-color: #F6E29F;
  background: radial-gradient(circle at 50% 0%, #3D131C 0%, #1A070B 100%);
  box-shadow: 0 0 16px rgba(246, 226, 159, 0.35);
}
.theme-card-thumb {
  width: 100%;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(220, 181, 105, 0.4);
}
.theme-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.theme-card-badge {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(220, 181, 105, 0.2);
  color: #F6E29F;
  align-self: flex-start;
  font-weight: 700;
}
.theme-card-badge-new {
  background: rgba(146, 215, 255, 0.2);
  color: #A5E0FF;
  border: 1px solid rgba(146, 215, 255, 0.4);
}
.theme-card-info h4 {
  font: 700 14px 'Cinzel', var(--serif);
  color: #FFF8DC;
  margin: 0 0 4px;
}
.theme-card-info p {
  font-size: 11.5px;
  color: #CDB9A2;
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================================
   THEME TOGGLE BUTTON (IN VORSCHAU-BAR & EDITOR)
   ========================================================================== */
.preview-theme-toggle {
  display: flex;
  background: rgba(0, 0, 0, 0.5);
  border: 1.5px solid rgba(220, 181, 105, 0.4);
  border-radius: 9999px;
  padding: 2px;
  gap: 2px;
}
.theme-toggle-pill {
  background: transparent;
  border: none;
  color: #d5c1a8;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.theme-toggle-pill:hover {
  color: #FFF;
}
.theme-toggle-pill.active {
  background: linear-gradient(135deg, #F6E29F 0%, #D4AF37 100%);
  color: #1F070B;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
}
/* Drei Designs: auf schmalen Handys umbrechen statt seitlich überzustehen */
@media (max-width: 480px) {
  .preview-theme-toggle { min-width: 0; max-width: 100%; }
  .theme-toggle-pill { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
}

/* Schneefall */
.snow-flake {
  position: absolute;
  top: -30px;
  color: #FFFFFF;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
  user-select: none;
  animation: snowfall linear infinite;
}
@keyframes snowfall {
  0% {
    transform: translateY(-20px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 0.9; }
  90% { opacity: 0.8; }
  100% {
    transform: translateY(110%) translateX(35px) rotate(360deg);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .models-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .theme-picker-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 340px) {
  .recipient-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .editor-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Empfänger sehen keine Vorschau- und Bearbeiten-Steuerung */
.is-recipient-view .calendar-preview-bar,
.is-recipient-view .mobile-preview-dock {
  display: none !important;
}

/* ==========================================================================
   WINTERWUNDERLAND: SPAZIERGANG DURCHS LEBKUCHENDORF
   ========================================================================== */
.ww-stage {
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw) 40px;
  /* Höhe setzt winter-village.js passend zur Scrollstrecke */
  height: calc(100vh * 11);
}
.ww-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #070d1c;
  isolation: isolate;
}
/* Standbild, bis die 3D-Szene geladen ist */
.ww-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.ww-stage.is-ready .ww-poster { opacity: 0; }
.ww-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 1.2s ease;
  cursor: pointer;
  touch-action: pan-y;
}
.ww-stage.is-ready .ww-canvas { opacity: 1; }
.ww-canvas canvas { display: block; width: 100%; height: 100%; }
.ww-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 58%, rgba(3, 6, 16, .5) 100%),
              linear-gradient(180deg, rgba(3, 6, 16, .3) 0%, transparent 16%, transparent 85%, rgba(3, 6, 16, .35) 100%);
}

/* Hinweis über der heutigen Tür */
.ww-tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(10, 16, 34, .72);
  border: 1px solid rgba(255, 214, 140, .55);
  backdrop-filter: blur(6px);
  color: #fff3dc;
  font: 600 13px/1 var(--sans, 'Manrope', sans-serif);
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.ww-tag.is-visible { opacity: 1; }

/* Häuser als Tasten für Tastatur und Screenreader; sichtbar nur ohne 3D */
.ww-list {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ww-list:focus-within {
  clip: auto;
  width: auto;
  height: auto;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 6px;
}
.ww-house-btn {
  min-width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 214, 140, .5);
  background: rgba(10, 16, 34, .8);
  color: #fff3dc;
  font: 600 15px/1 'Cinzel', var(--serif);
  cursor: pointer;
}
.ww-house-btn.is-today { background: linear-gradient(135deg, #f3d38a, #c9963f); color: #2b1606; }
.ww-house-btn.is-locked { color: #9fb0c8; border-color: rgba(190, 215, 245, .3); }
.ww-stage.is-fallback .ww-list {
  clip: auto;
  width: min(92vw, 560px);
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.ww-stage.is-fallback .ww-house-btn { height: 52px; }

/* Kopfleiste mit Fortschritt */
.ww-hud {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  background: rgba(8, 14, 30, .62);
  border: 1px solid rgba(255, 214, 140, .35);
  backdrop-filter: blur(10px);
  color: #fff1d8;
  font: 600 13px/1 var(--sans, 'Manrope', sans-serif);
  white-space: nowrap;
}
.ww-hud:not(:has(.ww-today-btn)) { padding-right: 16px; }
.ww-today-btn {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #f3d38a, #c9963f);
  color: #2b1606;
  font: 700 12px/1 var(--sans, 'Manrope', sans-serif);
  cursor: pointer;
}
.ww-hint {
  position: absolute;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  color: #fff3dc;
  font: 500 16px/1.2 var(--serif);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
  transition: opacity .6s ease;
  pointer-events: none;
}
.ww-hint.is-hidden { opacity: 0; }
.ww-hint-arrow { animation: wwHint 1.8s ease-in-out infinite; }
@keyframes wwHint {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50% { transform: translateY(6px); opacity: 1; }
}
.ww-finale {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, 10px);
  z-index: 4;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  pointer-events: none;
  text-align: center;
}
.ww-finale p {
  margin: 0;
  font: 400 clamp(30px, 5vw, 56px)/1.1 var(--serif);
  color: #fff3dc;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .8), 0 0 40px rgba(255, 200, 110, .35);
}
.ww-finale.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Im Winterdorf läuft die Szene randlos, Fußzeile darunter */
.theme-winter_wonderland .calendar-bottom { margin-top: 0; }

/* ==========================================================================
   5-STAR HAUTE COUTURE PRE-LAUNCH & VIP WAITLIST
   Rich Velvet Bordeaux (#180408), Fine Hairline Gold & Bespoke Craftsmanship
   ========================================================================== */

body.is-foyer-view .site-header,
body.is-foyer-view .site-footer {
  display: none !important;
}

.foyer-wrap {
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 12%, #380711 0%, #1a0307 45%, #080103 100%);
  color: #f7f3ea;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

#foyer-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

.foyer-header {
  position: relative;
  z-index: 10;
  height: 86px;
  padding: 0 clamp(20px, 6vw, 84px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  background: rgba(14, 2, 5, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.foyer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #fcf9f2;
}

.foyer-brand-seal {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.6);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.35);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #2b040a;
}

.foyer-brand-seal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.foyer-brand-name {
  font: 500 24px/1 var(--serif);
  letter-spacing: 0.04em;
  color: #f7eed8;
  text-transform: lowercase;
}

.foyer-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.foyer-lang-select {
  background: rgba(26, 4, 8, 0.9);
  border: 1px solid rgba(212, 175, 55, 0.35);
  color: #f5e8c4;
  padding: 8px 16px;
  border-radius: 2px;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
}

.foyer-lang-select:hover,
.foyer-lang-select:focus {
  border-color: #d4af37;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.3);
}

.foyer-hero {
  position: relative;
  z-index: 5;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(54px, 8vw, 92px) 24px 50px;
  text-align: center;
}

.foyer-badge {
  display: inline-block;
  padding: 6px 20px;
  background: rgba(28, 4, 8, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #eed699;
  text-transform: uppercase;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

.foyer-headline {
  margin: 0 0 24px;
  font: 400 clamp(36px, 5.6vw, 68px)/1.08 var(--serif);
  letter-spacing: -0.035em;
  color: #fffaf0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.75);
}

.foyer-headline em {
  display: inline-block;
  font-style: italic;
  font-weight: 400;
  color: #eed699;
  text-shadow: 0 0 25px rgba(212, 175, 55, 0.3);
}

.foyer-subheadline {
  max-width: 640px;
  margin: 0 auto 40px;
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.85;
  color: #cfc2ad;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* VIP Invitation Box - Crisp, tailored, fine gold outline */
.foyer-box {
  background: linear-gradient(180deg, rgba(28, 5, 10, 0.95) 0%, rgba(13, 2, 5, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.45);
  outline: 1px solid rgba(212, 175, 55, 0.15);
  outline-offset: 5px;
  border-radius: 2px;
  padding: clamp(32px, 5vw, 44px) clamp(22px, 4vw, 40px);
  max-width: 620px;
  margin: 0 auto;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.85), 0 0 35px rgba(212, 175, 55, 0.08);
  position: relative;
}

.foyer-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.foyer-form-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 580px) {
  .foyer-form-row {
    flex-direction: row;
    gap: 10px;
  }
}

.foyer-input {
  flex: 1;
  background: rgba(8, 1, 3, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #fffaf0;
  font-size: 14.5px;
  padding: 16px 20px;
  border-radius: 2px;
  outline: none;
  transition: all 0.25s ease;
  width: 100%;
}

.foyer-input::placeholder {
  color: #8c7e70;
}

.foyer-input:focus {
  border-color: #d4af37;
  background: rgba(8, 1, 3, 0.95);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.28);
}

.foyer-btn {
  background: linear-gradient(135deg, #d4af37 0%, #f6e49d 40%, #c49926 75%, #dfbb54 100%);
  color: #170306;
  border: none;
  padding: 16px 28px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.28);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.foyer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(212, 175, 55, 0.45);
  filter: brightness(1.05);
}

.foyer-btn:active {
  transform: translateY(0);
}

.foyer-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.foyer-live-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 12.5px;
  color: #eed699;
  letter-spacing: 0.04em;
}

.foyer-live-dot {
  width: 7px;
  height: 7px;
  background: #d4af37;
  border-radius: 50%;
  box-shadow: 0 0 10px #d4af37;
  animation: pulseDot 2.2s infinite;
}

.foyer-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(212, 175, 55, 0.14);
  font-size: 11px;
  color: #a89a87;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foyer-success-card {
  text-align: center;
  padding: 16px 8px;
  animation: fadeIn 0.4s ease;
}

.foyer-success-seal {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.7);
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
  overflow: hidden;
}

.foyer-success-seal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.foyer-success-title {
  font: 400 24px/1.2 var(--serif);
  color: #eed699;
  margin: 0 0 12px;
  letter-spacing: 0.02em;
}

.foyer-success-desc {
  font-size: 14px;
  color: #cfc2ad;
  line-height: 1.7;
  margin: 0;
}

/* Feature Section — 4 Crisp Tailored Boxes */
.foyer-section {
  position: relative;
  z-index: 5;
  max-width: 860px;
  margin: 44px auto 0;
  padding: 0 clamp(16px, 4vw, 24px);
  width: 100%;
  box-sizing: border-box;
}

.foyer-section-header {
  text-align: center;
  margin-bottom: 38px;
}

.foyer-section-title {
  font: 400 clamp(24px, 3.4vw, 36px)/1.2 var(--serif);
  color: #fff9ee;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.foyer-section-sub {
  font-size: 14.5px;
  color: #bfaea0;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Feature Grid: 1 column on mobile (< 640px), strictly 2x2 on tablet, iPad & desktop (>= 640px) */
.foyer-concierge-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .foyer-concierge-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}

.foyer-concierge-card {
  background: rgba(22, 4, 8, 0.75);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-top: 2px solid #d4af37;
  border-radius: 2px;
  padding: 28px 24px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}

.foyer-concierge-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212, 175, 55, 0.5);
}

.foyer-concierge-num {
  font: 500 11.5px/1 var(--serif);
  color: #d4af37;
  letter-spacing: 0.18em;
  margin-bottom: 14px;
  text-transform: uppercase;
  opacity: 0.9;
}

.foyer-concierge-title {
  font: 500 19px/1.3 var(--serif);
  color: #fffaf0;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.foyer-concierge-desc {
  font-size: 13px;
  line-height: 1.7;
  color: #bfaea0;
  margin: 0;
}

/* Social Media Section — Separate Links */
.foyer-social-wrap {
  margin: 60px auto 40px;
  max-width: 640px;
  padding: 0 24px;
  text-align: center;
  position: relative;
  z-index: 5;
}

.foyer-social-card {
  background: rgba(22, 4, 8, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 2px;
  padding: 30px 24px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

.foyer-social-title {
  font-size: 13px;
  color: #cfc2ad;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 20px;
}

.foyer-social-links-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.foyer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #eed699;
  font: 500 12.5px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 2px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.35);
  transition: all 0.25s ease;
}

.foyer-social-link:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: #d4af37;
  color: #fffaf0;
  transform: translateY(-1px);
}

/* Foyer Footer — Clean, discrete, no legal clause in footer body */
.foyer-footer {
  position: relative;
  z-index: 10;
  margin-top: auto;
  padding: 38px 24px 30px;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
  background: rgba(10, 2, 4, 0.95);
  text-align: center;
  font-size: 12px;
  color: #8c7e70;
}

.foyer-footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.foyer-footer-links a {
  color: #a89a87;
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.foyer-footer-links a:hover {
  color: #eed699;
}

/* Launch Date Callout */
.foyer-launch-date {
  font: 500 13px/1.4 var(--sans, sans-serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #eed699;
  margin: -24px auto 38px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 22px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 2px;
}

/* Form Label */
.foyer-form-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #eed699;
  text-align: left;
  margin-bottom: 4px;
}

/* Exclusive Sneak Peek Action */
.foyer-sneak-action {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.foyer-sneak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #f7eed8;
  font: 600 12px/1 var(--sans, sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.foyer-sneak-btn:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: #d4af37;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25);
}

/* Sneak Peek Dedicated Page */
.sneak-peek-main {
  position: relative;
  z-index: 5;
  max-width: 900px;
  margin: 40px auto 60px;
  padding: 0 24px;
  text-align: center;
}

.sneak-peek-card {
  background: linear-gradient(180deg, rgba(28, 5, 10, 0.95) 0%, rgba(13, 2, 5, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.35);
  outline: 1px solid rgba(212, 175, 55, 0.15);
  outline-offset: 5px;
  border-radius: 2px;
  padding: clamp(36px, 6vw, 60px) clamp(24px, 5vw, 48px);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.85);
}

.sneak-peek-title {
  font: 400 clamp(30px, 4.5vw, 48px)/1.15 var(--serif, serif);
  color: #fffaf0;
  margin: 0 0 16px;
}

.sneak-peek-sub {
  font-size: 15px;
  line-height: 1.8;
  color: #cfc2ad;
  max-width: 600px;
  margin: 0 auto 28px;
}

/* Interactive Flashlight / Torch Stage */
.sneak-peek-torch-stage {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 1024 / 665;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.45);
  outline: 1px solid rgba(212, 175, 55, 0.15);
  outline-offset: 4px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.9), 0 0 30px rgba(212, 175, 55, 0.1);
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  background: #080204;
}

/* Base image: heavily grayed out, dark nocturnal mystery */
.torch-base-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.18) grayscale(0.88) contrast(1.15);
  pointer-events: none;
}

/* Dark ambient vignette overlay */
.torch-dark-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(15, 2, 5, 0.3) 0%, rgba(6, 1, 2, 0.75) 100%);
  pointer-events: none;
}

/* Revealed layer: masked with a smooth circular flashlight spotlight */
.torch-revealed-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --torch-x: 50%;
  --torch-y: 50%;
  --torch-r: 135px;
  -webkit-mask-image: radial-gradient(circle var(--torch-r) at var(--torch-x) var(--torch-y), rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle var(--torch-r) at var(--torch-x) var(--torch-y), rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0) 100%);
}

.torch-reveal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.15) brightness(1.08) contrast(1.05);
}

/* Golden warmth & glow ring around the flashlight beam */
.torch-beam-glow {
  position: absolute;
  top: var(--torch-y, 50%);
  left: var(--torch-x, 50%);
  width: calc(var(--torch-r, 135px) * 2);
  height: calc(var(--torch-r, 135px) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 35px rgba(255, 225, 140, 0.45), 0 0 45px rgba(212, 175, 55, 0.3);
  border: 1px solid rgba(255, 235, 180, 0.28);
}

/* Custom golden crosshair cursor */
.torch-cursor-ring {
  position: absolute;
  top: var(--torch-y, 50%);
  left: var(--torch-x, 50%);
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 240, 200, 0.95);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.9);
  pointer-events: none;
  transition: opacity 0.2s ease;
  opacity: 0.85;
}

/* Instruction hint below image */
.torch-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 26px;
  font-size: 12.5px;
  color: #cfc2ad;
  letter-spacing: 0.04em;
  padding: 8px 20px;
  background: rgba(22, 4, 8, 0.65);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 2px;
}

.torch-hint-icon {
  color: #d4af37;
  font-size: 14px;
}

.sneak-peek-action {
  margin-top: 10px;
}

@media (max-width: 640px) {
  .torch-revealed-layer {
    --torch-r: 105px;
  }
}

.foyer-back-btn {
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #eed699;
  padding: 8px 16px;
  border-radius: 2px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.foyer-back-btn:hover {
  border-color: #d4af37;
  background: rgba(212, 175, 55, 0.12);
  color: #fff;
}

/* ===== Winterwunderland: Überraschung hinter dem vereisten Fenster ===== */
.ww-reveal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 196, 120, .2), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(12, 24, 52, .38), rgba(4, 9, 24, .78));
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  animation: wwRevealFade .5s ease both;
  font-family: "Manrope", var(--sans);
}
@keyframes wwRevealFade { from { opacity: 0; } }
.ww-reveal-scene {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: 100%;
  max-height: 100%;
}
.ww-reveal-pane {
  /* Lebkuchen-Rahmen als 9-Slice um das Fenster, Dicke wächst mit der Breite */
  --fb: clamp(34px, 9vw, 74px);
  position: relative;
  margin: calc(var(--fb) * 1.36) calc(var(--fb) * 1.15) calc(var(--fb) * 1.07) var(--fb);
  animation: wwRevealRise .75s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes wwRevealRise { from { opacity: 0; transform: translateY(26px) scale(.94); } }
.ww-reveal-frame {
  position: absolute;
  inset: calc(var(--fb) * -1.36) calc(var(--fb) * -1.15) calc(var(--fb) * -1.07) calc(var(--fb) * -1);
  border-style: solid;
  border-width: calc(var(--fb) * 1.36) calc(var(--fb) * 1.15) calc(var(--fb) * 1.07) var(--fb);
  border-image: url("/app-assets/images/winter/walk/frame.webp") 327 278 257 241 / calc(var(--fb) * 1.36) calc(var(--fb) * 1.15) calc(var(--fb) * 1.07) var(--fb) round;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .5)) drop-shadow(0 0 60px rgba(255, 180, 100, .25));
}
.ww-reveal-window {
  position: relative;
  width: min(calc(100vw - 32px - var(--fb) * 2.15), 420px, 56vh);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 228, 170, .95), transparent 62%),
    radial-gradient(ellipse at 50% 100%, rgba(232, 150, 70, .55), transparent 60%),
    linear-gradient(180deg, #fff7ea 0%, #f6e3c6 55%, #ebcda4 100%);
  box-shadow: inset 0 0 26px rgba(90, 50, 20, .35);
}
.ww-reveal:not(.is-frosted) .ww-reveal-content { visibility: hidden; }
.ww-reveal-content {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 9% 8% 8%;
  text-align: center;
  color: #4a2c19;
  scrollbar-width: thin;
}
.ww-reveal-day {
  font: 600 11px/1 "Manrope", var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #a8662c;
}
.ww-reveal-title {
  margin: 0;
  font: 600 clamp(26px, 6.4vw, 36px)/1.08 "Cormorant Garamond", Georgia, serif;
  color: #5a2a12;
  text-wrap: balance;
}
.ww-reveal-title::after {
  content: "❄";
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: #c08a4e;
  letter-spacing: 0;
}
.ww-reveal-photo {
  margin: 2px 0;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(90, 50, 20, .08);
  box-shadow: 0 0 0 4px #fffaf1, 0 14px 30px rgba(90, 48, 16, .28);
  flex-shrink: 0;
}
.ww-reveal-photo { aspect-ratio: 4 / 3; }
.ww-reveal-photo img,
.ww-reveal-photo video { display: block; width: 100%; height: 100%; }
.ww-reveal-photo.is-video video { background: #120b06; }
.ww-reveal-audio { width: 100%; display: grid; gap: 8px; font: 500 12px "Manrope", var(--sans); color: #8a5326; }
.ww-reveal-audio audio { width: 100%; }
.ww-reveal-message {
  margin: 0;
  font: italic 400 clamp(19px, 4.6vw, 23px)/1.45 "Cormorant Garamond", Georgia, serif;
  color: #4a2c19;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.ww-reveal-message a { color: #9b4a1c; }
.ww-reveal-voucher {
  width: 100%;
  display: grid;
  gap: 12px;
  padding: 18px 16px;
  border: 1.5px dashed rgba(150, 88, 36, .55);
  border-radius: 18px;
  background: rgba(255, 250, 240, .7);
}
.ww-reveal-voucher-tag { font: 700 10px/1 "Manrope", var(--sans); letter-spacing: .2em; color: #a8662c; }
.ww-reveal-link {
  align-self: center;
  display: inline-flex;
  padding: 11px 20px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e2b25e, #c58a34);
  color: #fffaf0;
  font: 700 14px/1 "Manrope", var(--sans);
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(150, 90, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.ww-reveal-sign {
  margin: 6px 0 0;
  font: italic 500 18px/1.3 "Cormorant Garamond", Georgia, serif;
  color: #8a5326;
}
.ww-reveal-frost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  touch-action: none;
  cursor: grab;
  transition: opacity 1.1s ease, filter 1.1s ease, transform 1.1s ease;
  animation: wwFrostForm 1.2s ease both;
}
.ww-reveal.is-wiping .ww-reveal-frost { cursor: grabbing; }
@keyframes wwFrostForm { from { filter: blur(10px) brightness(1.15); } }
.ww-reveal.is-revealed .ww-reveal-frost { opacity: 0; filter: blur(10px) brightness(1.3); transform: scale(1.04); pointer-events: none; }
.ww-reveal-sparkle {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 120% 0;
  opacity: 0;
}
.ww-reveal.is-revealed .ww-reveal-sparkle { animation: wwSheen 1.4s ease .15s both; }
@keyframes wwSheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -30% 0; } }
.ww-reveal-below { display: grid; justify-items: center; min-height: 92px; width: min(92vw, 460px); }
.ww-reveal-below > * { grid-area: 1 / 1; }
.ww-reveal-tools { display: grid; justify-items: center; gap: 12px; transition: opacity .5s ease, transform .5s ease; }
.ww-reveal.is-revealed .ww-reveal-tools { opacity: 0; transform: translateY(8px); pointer-events: none; }
.ww-reveal-hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #f4f8ff;
  font: 600 14px/1 "Manrope", var(--sans);
  letter-spacing: .01em;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
}
.ww-reveal-finger {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 35%, rgba(255, 255, 255, .35) 36% 60%, transparent 62%);
  animation: wwFinger 2.2s ease-in-out infinite;
}
@keyframes wwFinger { 0%, 100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.ww-reveal.is-wiping .ww-reveal-hint { opacity: .55; }
.ww-reveal-all {
  border: 0;
  background: none;
  color: rgba(235, 242, 255, .82);
  font: 600 13px/1 "Manrope", var(--sans);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(235, 242, 255, .4);
  cursor: pointer;
  padding: 6px 10px;
}
.ww-reveal-all:hover, .ww-reveal-all:focus-visible { color: #fff; }
.ww-reveal-scene:focus { outline: none; }
.ww-reveal-reactions {
  display: grid;
  justify-items: center;
  gap: 10px;
  color: rgba(240, 245, 255, .85);
  font: 500 13px/1.3 "Manrope", var(--sans);
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .6s ease .7s, transform .6s ease .7s;
}
.ww-reveal.is-revealed .ww-reveal-reactions { opacity: 1; transform: none; pointer-events: auto; }
.ww-reveal-reactions > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ww-reveal-reactions button {
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 600 13px/1 "Manrope", var(--sans);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.ww-reveal-reactions button:hover { background: rgba(255, 255, 255, .24); transform: translateY(-1px); }
.ww-reveal-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}
.ww-reveal.is-reduced *, .ww-reveal.is-reduced { animation: none !important; transition-duration: .01s !important; }
/* Der Rahmen-Container des klassischen Briefs soll das Dorf nicht abdunkeln */
#modal-root:has(> .ww-reveal) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; overflow: visible; }

/* ==========================================================================
   SCHRIFTARTEN-SYSTEM (FONTS: CLASSIC, MODERN, HANDWRITTEN, SCRIPT, FESTIVE)
   ========================================================================== */
:root,
[data-font="classic"],
.font-classic {
  --cal-font-headline: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --cal-font-body: "Cormorant Garamond", Georgia, serif;
  --cal-font-note: "Cormorant Garamond", Georgia, serif;
  --cal-font-signature: "Cormorant Garamond", Georgia, serif;
  --cal-font-accent: "Playfair Display", Georgia, serif;
}

[data-font="modern"],
.font-modern {
  --cal-font-headline: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cal-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cal-font-note: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cal-font-signature: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cal-font-accent: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-font="modern"] .recipient-heading h1 span,
.font-modern .recipient-heading h1 span {
  font-style: normal !important;
  font-weight: 700 !important;
}

[data-font="handwritten"],
.font-handwritten {
  --cal-font-headline: "Caveat", "Dancing Script", cursive;
  --cal-font-body: "Caveat", "Dancing Script", cursive;
  --cal-font-note: "Caveat", "Dancing Script", cursive;
  --cal-font-signature: "Caveat", "Dancing Script", cursive;
  --cal-font-accent: "Dancing Script", cursive;
}
[data-font="handwritten"] .recipient-heading h1,
.font-handwritten .recipient-heading h1 {
  font-size: clamp(48px, 8vw, 84px) !important;
  line-height: 1.05 !important;
}

[data-font="script"],
.font-script {
  --cal-font-headline: "Cormorant Garamond", "Playfair Display", serif;
  --cal-font-body: "Pinyon Script", "Cormorant Garamond", serif;
  --cal-font-note: "Pinyon Script", "Cormorant Garamond", serif;
  --cal-font-signature: "Pinyon Script", "Cormorant Garamond", serif;
  --cal-font-accent: "Cormorant Garamond", serif;
}

[data-font="festive"],
.font-festive {
  --cal-font-headline: "Cinzel", Georgia, serif;
  --cal-font-body: "Cinzel", "Cormorant Garamond", serif;
  --cal-font-note: "Cinzel", "Cormorant Garamond", serif;
  --cal-font-signature: "Cinzel", serif;
  --cal-font-accent: "Cinzel", serif;
}
[data-font="festive"] .recipient-heading h1 span,
.font-festive .recipient-heading h1 span {
  font-style: normal !important;
  letter-spacing: .08em !important;
}

/* Wende Schriftart auf Überschriften und Inhalte an */
.recipient-heading h1,
[data-font] .recipient-heading h1 {
  font-family: var(--cal-font-headline, var(--serif)) !important;
}
.letter-message-content,
[data-font] .letter-message-content {
  font-family: var(--cal-font-body, var(--serif));
}
.letter-signature-block .signature-name,
[data-font] .letter-signature-block .signature-name {
  font-family: var(--cal-font-signature, "Dancing Script", cursive);
}

/* Vorschauleiste Schriftart-Auswahl */
.preview-font-toggle-wrap {
  display: flex;
  align-items: center;
}
.preview-font-select {
  background: #1B0C10;
  color: #F8E5B7;
  border: 1px solid rgba(220, 181, 105, 0.45);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  font-family: var(--sans);
}
.preview-font-select:hover,
.preview-font-select:focus {
  border-color: #F6E29F;
  background: #251217;
  box-shadow: 0 0 10px rgba(220, 181, 105, 0.25);
}

/* Einstellungen Modal Schriftart-Karten */
.font-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.font-picker-card {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(220, 181, 105, 0.25);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.font-picker-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.font-picker-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(220, 181, 105, 0.55);
  transform: translateY(-1px);
}
.font-picker-card.active {
  background: rgba(220, 181, 105, 0.12);
  border-color: #F6E29F;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.25);
}
.font-card-preview {
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 8px;
  color: #F8E5B7;
  min-height: 28px;
  display: flex;
  align-items: center;
}
.font-preview-classic {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 600;
}
.font-preview-modern {
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.font-preview-handwritten {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 25px;
}
.font-preview-script {
  font-family: "Pinyon Script", cursive;
  font-size: 26px;
}
.font-preview-festive {
  font-family: "Cinzel", serif;
  font-size: 14px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.font-card-info strong {
  display: block;
  font-size: 13px;
  color: #FFF;
  margin-bottom: 3px;
}
.font-card-info small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.35;
}

/* Beim Gestalten (Erstellen/Editor) kein zusätzlicher „Kalender gestalten“-Button im Header */
.is-builder-view .header-actions [data-action="create"] { display: none; }

/* Hinweis im Editor: eigenes Foto, Video oder eigene Sprachnachricht hochladen */
.media-upload-prompt { margin: 0 0 8px; padding: 10px 12px; font-size: 13px; line-height: 1.45; color: #F8E5B7; background: rgba(246, 226, 159, 0.08); border: 1px dashed rgba(220, 181, 105, 0.55); border-radius: 6px; }

/* Stimmungsbild im Brief, wenn kein eigenes Foto hochgeladen wurde: dezent im Querformat */
.stationery-media-mount.is-mood img,
.letter-media-wrap.is-mood img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  max-height: 260px;
  object-fit: cover !important;
  display: block;
  border-radius: 3px;
}
.ww-reveal-photo.is-mood { aspect-ratio: 3 / 2; }

/* Vorschau des Stimmungsbilds im Editor, solange keine eigene Datei hochgeladen ist */
.media-fallback-box .media-upload-prompt { margin-bottom: 10px; }
.media-fallback-preview { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.media-fallback-preview img { width: 120px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; border: 1px solid rgba(220, 181, 105, 0.45); flex-shrink: 0; }
.media-fallback-preview figcaption { font-size: 12px; line-height: 1.4; color: #d5c1a8; }

/* Zoom für Türchen-Fotos: das vergrößerte Foto bleibt im Rahmen */
.photo-zoom-frame { overflow: hidden; border-radius: 3px; }
.ww-reveal-photo { overflow: hidden; }
.zoom-val-badge { font-size: 12px; font-weight: 600; color: #D4AF37; background: rgba(212, 175, 55, 0.15); padding: 2px 8px; border-radius: 12px; border: 1px solid rgba(212, 175, 55, 0.3); }

/* ==========================================================================
   SICHERE APP: Meine Kalender, Anmelden, Bestätigen, Widerrufs-Checkbox, Link erneuern
   (neue Bausteine; nutzen die vorhandenen Farben des Palais-Designs)
   ========================================================================== */
.footer-legal-notice { font-size: .78rem; text-align: center; margin-top: .8rem; color: var(--muted); }

.my-calendars { max-width: 1480px; margin: 0 auto; padding: 34px clamp(22px, 5.5vw, 82px) 6px; }
.my-calendars-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.my-calendars-head h2 { margin: 0; font: 600 clamp(22px, 2.6vw, 30px)/1.15 'Cinzel', var(--serif); color: #f6e7c8; }
.my-calendars-account { margin: 6px 0 0; font-size: 13px; color: #d1bda3; }
.my-calendars-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.my-calendars-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 18px; }
.my-calendars-empty { margin: 0; font-size: 14px; color: #d1bda3; }
.cal-card { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 18px; border: 1px solid rgba(220, 181, 105, .35); border-radius: 10px; background: rgba(255, 245, 223, .035); }
.cal-card h3 { margin: 0 0 4px; font: 600 18px/1.25 var(--serif); color: #fff3dc; overflow-wrap: anywhere; }
.cal-card p { margin: 0; font-size: 12px; color: #d1bda3; }
.cal-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cal-badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(220, 181, 105, .4); color: #e9cc8f; }
.cal-badge.is-paid { background: rgba(212, 175, 55, .18); color: #f5d384; }
.cal-badge.is-shared { border-color: rgba(140, 200, 160, .5); color: #b9e2c4; }
.cal-badge.is-pending { border-color: rgba(229, 115, 115, .55); color: #f0a8a8; }
.cal-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-delete-btn { margin-left: auto; font-size: 12px; color: #e57373; }

.empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.login-page .share-modal-crest, .paid-page .share-modal-crest { margin-bottom: 18px; }

.gc-confirm-root { z-index: 10050; }
.gc-confirm-card { max-width: 460px; }
.gc-confirm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

.login-form { text-align: left; display: grid; gap: 12px; }
.login-form .field label { color: #f4dfbd; }
.login-form .button { width: 100%; }
.login-note { margin: 0; font-size: 12px; color: #d1bda3; text-align: center; }

.consent-box { text-align: left; margin: 18px 0 6px; padding: 14px; border: 1px solid rgba(220, 181, 105, .35); border-radius: 8px; background: rgba(16, 4, 6, .45); }
.consent-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #f4e6cc; cursor: pointer; }
.consent-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: #d4af37; }
.consent-german { margin-top: 10px; font-size: 12px; color: #d1bda3; }
.consent-german summary { cursor: pointer; }
.consent-german p { margin: 6px 0 0; }
.consent-links { margin: 10px 0 0; font-size: 12px; display: flex; gap: 8px; }
.consent-links a { color: #e9cc8f; }
.consent-error { margin: 0; color: #f0a8a8; font-size: 13px; }
.consent-required-hint { display: block; margin-top: 8px; font-size: 11px; color: #d1bda3; }
.paywall-unlock-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.share-rotate-row { display: grid; gap: 4px; justify-items: center; margin: 18px 0; }
.share-rotate-row small { font-size: 11px; color: #d1bda3; max-width: 380px; }

.upload-limit-hint { display: block; margin-top: 6px; font-size: 11px; opacity: .8; }
.consent-required-hint[hidden] { display: none; }

/* Login per Code (zwei Schritte im selben Fenster) */
.login-form .login-code-input { font: 600 26px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .2em; text-align: center; padding-left: .2em; font-variant-numeric: tabular-nums; }
.login-form .login-code-input::placeholder { letter-spacing: .2em; opacity: .35; }
.login-code-hint { display: block; margin-top: 6px; font-size: 12px; color: #d1bda3; text-align: center; }
.login-message { margin: 0; font-size: 13px; line-height: 1.45; color: #f0a8a8; text-align: center; }
.login-message.is-info { color: #b9e2c4; }
.login-message[hidden] { display: none; }
.login-code-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.login-form .login-code-actions .text-button { width: auto; padding: 6px 0; font-size: 13px; }
.login-code-actions .text-button:disabled { opacity: .55; cursor: default; text-decoration: none; }

/* Sicherheitsprüfung bleibt im sichtbaren Formular, auch beim erneuten Codeversand. */
.challenge-box { margin: 12px 0; max-width: 100%; min-width: 0; text-align: left; }
.challenge-box[hidden], .challenge-retry[hidden] { display: none; }
.challenge-widget { width: 100%; min-width: 0; }
.challenge-status { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: #d1bda3; }
.challenge-status.is-error { color: #f0a8a8; }
.challenge-retry { margin-top: 5px; font-size: 13px; }
.anonymous-notice { padding: 12px 14px; margin: 12px 0 18px; border: 1px solid rgba(220, 181, 105, .35); border-radius: 8px; font-size: 13px; line-height: 1.55; color: #f4dfbd; background: rgba(16, 4, 6, .35); }
.anonymous-notice .text-button { font-size: inherit; padding: 0 4px; }
#create-error { text-align: left; margin: 10px 0; }

/* Vorlage passend zur gewählten Beziehung */
.autofill-pack-card.is-recommended { padding-top: 38px; border-color: rgba(246, 226, 159, 0.85); box-shadow: 0 0 0 1px rgba(246, 226, 159, 0.35); position: relative; }
.pack-recommended { position: absolute; top: 8px; right: 8px; z-index: 1; background: #f6e29f; color: #2a0c12; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; }

/* Sprachaufnahme im Browser */
.voice-recorder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.voice-recorder[hidden] { display: none; }
.voice-recorder .is-recording { border-color: #e57373; color: #ffd7d7; animation: voice-pulse 1.4s ease-in-out infinite; }
.voice-record-timer { font-variant-numeric: tabular-nums; color: #F5D384; font-weight: 600; font-size: 13px; }
.voice-record-hint { flex-basis: 100%; opacity: .8; }
@keyframes voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,115,115,.45); } 50% { box-shadow: 0 0 0 6px rgba(229,115,115,0); } }
@media (prefers-reduced-motion: reduce) { .voice-recorder .is-recording { animation: none; } }

/* Quiz-Türchen: Editor */
.quiz-fields { border: 1px solid rgba(220, 181, 105, 0.35); border-radius: 6px; padding: 12px 14px; margin: 0; }
.quiz-fields[hidden] { display: none; }
.settings-section[hidden] { display: none; }
.quiz-fields legend { padding: 0 6px; color: #F5D384; font-weight: 600; }
.quiz-option-rows { display: grid; gap: 8px; margin: 10px 0 6px; }
.quiz-option-row { display: flex; align-items: center; gap: 10px; }
.quiz-option-row input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; accent-color: #d4af37; }
.quiz-option-row input:not([type="radio"]) { flex: 1; min-width: 0; }

/* Quiz-Türchen: Empfänger (Palast-Brief und Winterdorf) */
.quiz-card { margin: 14px 0; padding: 16px; border-radius: 8px; background: rgba(255, 250, 240, 0.7); border: 1px solid rgba(160, 120, 60, 0.35); color: #3b2a24; text-align: center; }
.quiz-badge { display: inline-block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #7D1A25; font-weight: 700; }
.quiz-question { font-family: var(--serif); font-size: 20px; margin: 8px 0 14px; }
.quiz-options { display: grid; gap: 8px; }
.quiz-option { font: inherit; padding: 11px 14px; border-radius: 6px; border: 1px solid rgba(125, 26, 37, 0.35); background: #fffaf2; color: #3b2a24; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.quiz-option:hover:not(:disabled) { border-color: #7D1A25; background: #fff3e2; }
.quiz-option:disabled { cursor: default; opacity: .75; }
.quiz-option.is-correct { background: #e6f4e6; border-color: #3f8a4b; color: #1f4d27; opacity: 1; font-weight: 600; }
.quiz-option.is-wrong { background: #fbe9e9; border-color: #b4443f; color: #7a2622; opacity: 1; }
.quiz-feedback { margin: 12px 0 0; font-weight: 600; }
.quiz-reveal { margin-top: 10px; font-family: var(--serif); font-size: 17px; line-height: 1.55; }
.quiz-option:focus-visible { outline: 2px solid #7D1A25; outline-offset: 2px; }

/* Aktivität des Empfängers im Editor */
.activity-panel { margin: 0 0 22px; padding: 16px 18px; border: 1px solid rgba(220, 181, 105, 0.35); border-radius: 8px; background: rgba(30, 13, 17, 0.6); }
.activity-title { font-size: 18px; margin: 0 0 6px; color: #F5D384; }
.activity-summary, .activity-hint { margin: 0; opacity: .9; }
.activity-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.activity-list li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.activity-reaction { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: rgba(246, 226, 159, 0.12); }

/* KI-Formulierung im Ideen-Fenster */
.ai-write-box { text-align: left; margin: 6px 0 18px; padding: 14px 16px; border: 1px solid rgba(220, 181, 105, 0.35); border-radius: 8px; display: grid; gap: 8px; }
.ai-write-title { margin: 0; font-size: 16px; }
.ai-write-label { font-size: 13px; font-weight: 600; }
.ai-write-box textarea { width: 100%; min-height: 64px; }
.ai-write-box .button { justify-self: start; }
.ai-write-note { opacity: .75; font-size: 12px; }
.ai-write-actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.quiz-option.is-correct::before { content: "✓ "; }
.quiz-option.is-wrong::before { content: "✗ "; }
.field[hidden] { display: none; }

/* Türchen-Kacheln: Titel nie unter dem Haken; auf dem Handy reichen Nummer, Symbol und Status */
.editor-day-title { padding-right: 20px; }
@media (max-width: 600px) {
  .editor-day-title { display: none !important; }
  .editor-day { min-height: 56px !important; }
}

/* Lesbarkeit (visueller Check 31.10.) */
/* Manrope hat ein sehr schmales Leerzeichen: Emoji und Text kleben sonst aneinander */
.button, .paywall-benefits li, .activity-reaction, .ai-sug-type, .model-perks li, .pack-features span, .preview-type-pill { word-spacing: .14em; }
/* Bildunterschrift steht auf dem goldenen Rahmen: dunkle Schrift statt hellem Beige */
.hero-caption { color: #3a2410; font-size: 12px; font-weight: 600; }
.hero-caption span:first-child { color: #3a2410; }
/* Hinweise und Etiketten nicht unter 12 px */
.field small, .upload-limit-hint { font-size: 12.5px; }
.theme-card-badge { font-size: 10.5px !important; }
/* Eingaben in Fenstern im dunklen App-Stil statt grauem Browser-Standard */
.ai-write-box textarea, #billing-country {
  background: rgba(12, 4, 7, 0.85); color: #fff6e8; border: 1px solid rgba(220, 181, 105, 0.45); border-radius: 6px; padding: 12px 14px; font: inherit;
}
.ai-write-box textarea::placeholder { color: rgba(245, 225, 190, 0.55); }
/* Sprachwahl und Musik am Handy groß genug zum Tippen */
@media (max-width: 680px) {
  #language-select, #music-toggle-btn { min-height: 40px; }
}
.button { word-spacing: .2em; }

/* Markenzeichen: Logo statt Buchstaben „gc“ */
.brand-mark { padding: 0; overflow: hidden; border-radius: 50%; }
.brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }

/* Mobil-Check 31.10.: Mindestgrößen, keine Überläufe */
@media (max-width: 680px) {
  /* Knöpfe, Auswahlfelder und Etiketten nicht unter 12–13 px */
  .button, .button-small, a.button { font-size: 13px !important; }
  .language-control select, #language-select { font-size: 13px !important; max-width: 64px !important; }
  .cal-badge, .models-kicker, .model-badge, .model-overlay-tag, .theme-card-badge, .preview-badge,
  .settings-preview-label, .price-type, .stamp-seal-caption, .ai-sug-type, .ph-note-label, .ww-reveal-day { font-size: 12px !important; }
  .stationery-brand-tag, .letter-crest-tag, .voucher-ribbon-tag { font-size: 11.5px !important; }
  .field small, .field label, small, .consent-required-hint, .status-footnote { font-size: 12.5px !important; }
  .progress-line span { font-size: 11.5px !important; }
  /* Kopf: der Knopf „Kalender gestalten“ bricht sonst zweizeilig um */
  .header-actions [data-action="create"] { white-space: nowrap; }
}
@media (max-width: 400px) {
  .header-actions [data-action="create"] { display: none; }
  .home-hero h1, .hero-copy h1 { font-size: clamp(40px, 12.5vw, 52px) !important; overflow-wrap: anywhere; }
  .hero-caption { flex-wrap: wrap; row-gap: 4px; }
  /* Vorschau-Leiste: Knöpfe umbrechen statt über den Rand zu laufen */
  .calendar-preview-bar, .preview-bar-left, .preview-bar-right, .preview-bar-center { flex-wrap: wrap; min-width: 0; }
  .preview-bar-left, .preview-bar-right { flex-shrink: 1; }
  .preview-pill, .preview-control-btn { white-space: normal; }
  #preview-day-select, #preview-font-select { max-width: 100%; }
  /* Winterdorf-Brief: kleinere Schrift, damit auch längere Briefe ins Fenster passen */
  .ww-reveal-message { font-size: 17px !important; }
  .ww-reveal-title { font-size: 25px !important; }
}
/* Langer Brief im Winterdorf: sanft ausblenden, damit man sieht, dass er weitergeht (scrollbar) */
.ww-reveal-content { -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent); mask-image: linear-gradient(to bottom, #000 88%, transparent); padding-bottom: 14%; }
@media (max-width: 680px) {
  .editor-actions .button, .editor-actions .button-small { font-size: 13px !important; }
  .settings-grid-3 label, .theme-card-info p { font-size: 12.5px !important; }
}
@media (max-width: 400px) {
  .calendar-preview-bar > *, .calendar-preview-bar .preview-pill { max-width: 100%; }
  .preview-badge { white-space: normal; }
}
@media (max-width: 400px) {
  .editor-actions .button { white-space: normal !important; line-height: 1.25 !important; }
}
@media (max-width: 400px) {
  .preview-pills { flex-wrap: wrap; max-width: 100%; }
  .preview-select-wrap, .preview-select-wrap select { max-width: 100%; min-width: 0; }
  .progress-line { flex-wrap: wrap; row-gap: 6px; }
  .progress-line .progress-track { flex: 1 1 24px; min-width: 24px; }
}
.preview-pill, .theme-toggle-pill, .preview-control-btn { word-spacing: .2em; }
@media (max-width: 400px) {
  .preview-pills { flex-direction: column; align-items: stretch; width: 100%; }
  .preview-pills .preview-pill { justify-content: center; }
  .preview-edit-btn, .preview-edit-btn span { overflow-wrap: normal !important; word-break: normal !important; hyphens: auto; font-size: 12.5px !important; }
}
@media (max-width: 400px) {
  .dock-btn, .dock-btn span { overflow-wrap: normal !important; word-break: normal !important; hyphens: auto; }
}

/* Preis auf der Startseite */
.hero-price { margin: 30px 0 0; max-width: 460px; }
.hero-price span { color: #d5c1a8; font-size: 13.5px; line-height: 1.5; }

/* Startseite: „Meine Kalender“ erst bei Konto oder Entwürfen; sonst dezenter Anmelden-Link */
.my-calendars[hidden], .hero-login[hidden] { display: none !important; }
.hero-login { margin: 14px 0 0; color: #d5c1a8; font-size: 14px; }
.hero-login .text-button { font: inherit; padding: 0; margin-left: 4px; }

/* Brief höher als der Bildschirm (Handy): oben nicht abschneiden, sondern scrollbar lassen.
   margin: 0 auto aus der Handy-Regel würde die sichere Zentrierung (margin: auto) aufheben. */
@media (max-width: 760px) {
  .modal-root > .letter-unboxing-stage, .modal-root > .letter-envelope-wrapper { margin: auto !important; }
  .modal-root.ph-modal { align-items: flex-start; }
}

/* Nachkontrolle 31.10. (Browser-Audit) */
/* Kopfzeile auf Tablet-Breite: Navigation weg, Musik nur als Symbol, Knopf einzeilig */
@media (min-width: 681px) and (max-width: 900px) {
  .header-nav { display: none; }
  .music-text { display: none; }
  .header-actions [data-action="create"] { white-space: nowrap; }
}
/* Türchen-Titel im Editor-Raster (Desktop) lesbar */
.editor-day-title { font-size: 11.5px; }
/* Seitenrand auf dem Handy wie auf der Startseite */
@media (max-width: 600px) {
  .editor-page { padding-left: 16px !important; padding-right: 16px !important; }
  .closing-note-inner button { display: block; margin-top: 6px; }
}
/* Fußzeilen-Links nicht mitten im Namen umbrechen */
.site-footer a { white-space: nowrap; }
/* Palast-Brief: Kleine Beschriftungen nicht unter 11,5 px */
.ph-letter .letter-crest-tag, .stamp-header-label, .stamp-seal-caption { font-size: 11.5px !important; }
/* Winterdorf: Schlusstitel auch über verschneiten Dächern lesbar */
.ww-finale { padding: 10px 26px; border-radius: 999px; background: radial-gradient(ellipse at center, rgba(8, 16, 34, .62) 0%, rgba(8, 16, 34, 0) 72%); }
.ww-finale p { text-shadow: 0 2px 6px rgba(0, 0, 0, .95), 0 4px 30px rgba(0, 0, 0, .85), 0 0 40px rgba(255, 200, 110, .35); }
/* Hinweis unter dem Rechnungsland */
.billing-country-hint { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 400; opacity: .85; line-height: 1.45; }
/* Fußzeile darf als Ganzes umbrechen, die einzelnen Links nicht */
.footer-inner { flex-wrap: wrap; row-gap: 12px; }

/* Anlegen: Start mit Vorlage oder leer, Feineinstellungen eingeklappt (November 2026) */
.create-start { border: 1px solid rgba(220, 181, 105, 0.35); border-radius: 8px; padding: 12px 14px; margin: 4px 0 14px; display: grid; gap: 10px; }
.create-start legend { padding: 0 6px; color: #F5D384; font-weight: 600; }
.create-start .create-start-option { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: normal; margin: 0; text-transform: none; letter-spacing: normal; }
.create-start .create-start-option input[type="radio"] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 3px 0 0; accent-color: #d4af37; flex: none; box-shadow: none; }
.create-start-option span { display: grid; gap: 2px; }
.create-start-option small { opacity: .85; line-height: 1.45; }
.create-more { border-top: 1px solid rgba(220, 181, 105, 0.25); margin: 4px 0 10px; padding-top: 10px; }
.create-more > summary { cursor: pointer; color: #F5D384; font-weight: 600; font-size: 14px; padding: 4px 0; list-style-position: inside; }
.create-more[open] > summary { margin-bottom: 10px; }

/* Mehrere Fotos auf einmal zuordnen */
.bulk-photo-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; max-height: min(52vh, 460px); overflow-y: auto; text-align: left; }
.bulk-photo-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.bulk-photo-row img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(220, 181, 105, 0.4); }
.bulk-photo-select { display: grid; gap: 4px; min-width: 0; font-size: 12.5px; }
.bulk-photo-select span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.bulk-photo-select select { width: 100%; background: rgba(12, 4, 7, 0.85); color: #fff6e8; border: 1px solid rgba(220, 181, 105, 0.45); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 14px; }

/* KI: vorhandenen Text überarbeiten */
.ai-rewrite-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-rewrite-box .ai-write-label { font-weight: normal; opacity: .85; margin: 0; }

/* Erste Schritte oben im Editor (frischer Entwurf) */
.editor-top:has(> .first-steps) { flex-wrap: wrap; }
.editor-top > .first-steps { order: 3; flex: 1 0 100%; }
.first-steps { margin: 0; padding: 18px 20px; text-align: left; border: 1px solid rgba(220, 181, 105, 0.45); border-radius: 8px; background: rgba(30, 13, 17, 0.6); }
.first-steps-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.first-steps-head h2 { margin: 0 0 4px; font-size: 20px; color: #F5D384; }
.first-steps-head p { margin: 0; color: #d5c1a8; font-size: 14px; }
.first-steps-head .text-button { flex: none; padding-top: 2px; font-size: 12px; }
.first-steps-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.first-step { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid rgba(220, 181, 105, 0.2); border-radius: 6px; }
.first-step.is-next { border-color: rgba(246, 226, 159, 0.65); background: rgba(246, 226, 159, 0.06); }
.first-step-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(220, 181, 105, 0.6); color: #F5D384; font-weight: 700; font-size: 14px; }
.first-step.is-done .first-step-mark { background: #D4AF37; border-color: #D4AF37; color: #1F070B; }
.first-step.is-done .first-step-text { opacity: .7; }
.first-step-text { display: grid; gap: 2px; min-width: 0; }
.first-step-text strong { color: #f4dfbd; font-size: 15px; }
.first-step-text small { color: #d5c1a8; font-size: 13px; line-height: 1.4; }
.editor-actions.is-quiet > .button { opacity: .55; }
.editor-actions.is-quiet > .button:hover, .editor-actions.is-quiet > .button:focus-visible { opacity: 1; }
.is-attention { animation: firstStepAttention 1.2s ease-in-out 3; }
@keyframes firstStepAttention { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 226, 159, 0); } 50% { box-shadow: 0 0 0 4px rgba(246, 226, 159, 0.55); } }
@media (prefers-reduced-motion: reduce) { .is-attention { animation: none; outline: 2px solid #F5D384; outline-offset: 2px; } }
@media (max-width: 760px) {
  .first-steps { padding: 16px; }
  .first-step { grid-template-columns: 30px 1fr; }
  .first-step .button { grid-column: 2; justify-self: start; }
}