/* ==========================================================================
   Dirk Dittrich Fotografie - Brief Tool Basis Optik (brief-base.css)
   --------------------------------------------------------------------------
   Schwarz-Gold, eleganter echter Brief. Cremefarbene Briefkarte auf dem
   dunklen Theme Hintergrund.

   Aufbau abgeleitet aus der Villa Vorlage (.brief* / .siegel*), Farben auf
   Schwarz-Gold umgestellt, Restaurant Regeln (.contact-action*) entfernt.

   WICHTIG: Der lineare Briefpapier Gradient auf .brief__textarea ist auf die
   Handschrift Engine abgestimmt (FONT_SIZE 32, LINE_HEIGHT 40, BASELINE_Y 31).
   Linien Geometrie NICHT veraendern, nur die Linien Farbe.

   Die --vr-* Variablen werden hier auf .brief-scene neu definiert, damit auch
   brief-handschrift.css automatisch die neuen Farben uebernimmt.
   ========================================================================== */


/* ==========================================================================
   1. FARB- UND DESIGN-TOKENS (Schwarz-Gold, gescoped auf .brief-scene)
   ========================================================================== */

.brief-scene {
  /* --- Tinte / Espresso-Braun (Handschrift, Anrede, Text) --- */
  --vr-burgund:        #2e2114;
  --vr-burgund-tief:   #1d160d;
  --vr-burgund-hell:   #3c2c1b;

  /* --- Gold (Theme-Akzent, Siegel, Senden-Button) --- */
  --vr-gold:           #c9a96e;
  --vr-gold-tief:      #8a6d3b;
  --vr-gold-hell:      #e0c48a;

  /* --- Papier / Creme (Briefkarte) --- */
  --vr-creme:          #f6efe1;
  --vr-creme-tief:     #efe6d2;
  --vr-papier:         #f6efe1;

  /* --- Text dunkel --- */
  --vr-anthrazit:      #2e2114;
  --vr-anthrazit-soft: #4a3a28;
  --vr-text-dunkel:    #2e2114;
  --vr-text-primary:   #2e2114;
  --vr-text-secondary: #4a3a28;
  --vr-text-muted:     #7a6a55;

  /* --- Akzent (Highlight im Siegel) --- */
  --vr-glut:           #e0c48a;

  /* --- Linien (Briefpapier, Feldtrenner) --- */
  --vr-linie:          #d8cba8;
  --vr-linie-soft:     #e6dcc4;

  /* --- Status --- */
  --vr-success:        #4a6b3a;
  --vr-error:          #a02830;

  /* --- Schrift --- */
  --vr-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --vr-font-body:    'Lora', Georgia, 'Times New Roman', serif;
  --vr-font-hand:    'Dancing Script', 'Caveat', cursive;

  /* --- Abstaende (4px Grid) --- */
  --vr-space-4xs:  2px;
  --vr-space-3xs:  4px;
  --vr-space-2xs:  8px;
  --vr-space-xs:  12px;
  --vr-space-sm:  16px;
  --vr-space-md:  24px;
  --vr-space-lg:  32px;
  --vr-space-xl:  48px;
  --vr-space-2xl: 64px;

  /* --- Radius --- */
  --vr-radius-sm:   6px;
  --vr-radius-md:  10px;
  --vr-radius-lg:  16px;
  --vr-radius-full: 9999px;

  /* --- Schatten --- */
  --vr-shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.25);
  --vr-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.35);
  --vr-shadow-lg:      0 12px 28px rgba(0, 0, 0, 0.45);
  --vr-shadow-gold:    0 10px 22px rgba(201, 169, 110, 0.28);

  /* --- Typo Detail --- */
  --vr-tracking-wide:   0.02em;
  --vr-tracking-wider:  0.04em;
  --vr-leading-snug:    1.35;

  /* --- Transitions --- */
  --vr-trans-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);

  --vr-text-sm:    calc(0.875rem + 6px);
  --vr-text-md:    calc(1.0625rem + 6px);
  --vr-text-base:  calc(1rem + 6px);
  --vr-text-xl:    calc(1.4rem + 6px);
}


/* ==========================================================================
   2. @FONT-FACE Dancing Script (lokal aus dem Theme)
   ========================================================================== */

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/wp-content/themes/dirkdittrich/brief/fonts/dancing-script-v29-latin-regular.woff2') format('woff2'),
       url('/wp-content/themes/dirkdittrich/brief/fonts/dancing-script-v29-latin-regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/wp-content/themes/dirkdittrich/brief/fonts/dancing-script-v29-latin-700.woff2') format('woff2');
}


/* ==========================================================================
   3. SZENE (dunkler Seitenhintergrund, Theme-konform schwarz mit Goldhauch)
   ========================================================================== */

.brief-scene {
  position: relative;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse at center top, rgba(201, 169, 110, 0.08), transparent 60%),
    radial-gradient(ellipse at center, #16120c 0%, #0c0a07 70%, #050402 100%);
  overflow: hidden;
}
.brief-scene::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none; z-index: 0;
}
.brief-scene__inner {
  position: relative; z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}


/* ==========================================================================
   4. HERO
   ========================================================================== */

.brief-hero {
  text-align: center;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  color: var(--vr-creme);
}
.brief-hero__headline {
  font-family: var(--vr-font-display);
  font-size: calc(clamp(1.75rem, 3vw, 2.5rem) + 2px);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 0.5rem;
  color: var(--vr-creme);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.brief-hero__sub {
  font-family: var(--vr-font-hand);
  font-size: calc(clamp(1rem, 2vw, 1.35rem) + 6px);
  color: var(--vr-gold-hell);
  line-height: 1;
  margin: 0;
  transform: rotate(-2deg);
  display: inline-block;
}


/* ==========================================================================
   5. BRIEF (cremefarbene Papierkarte, dezenter Goldrahmen)
   ========================================================================== */

.brief {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  background: var(--vr-papier);
  padding: clamp(1.75rem, 5vw, 3.5rem);
  border-radius: var(--vr-radius-sm);
  border: 1px solid rgba(201, 169, 110, 0.45);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(246, 239, 225, 0.6);
}

/* Dezente Goldecke oben rechts */
.brief::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 56px; height: 56px;
  background: linear-gradient(225deg, rgba(201, 169, 110, 0.22) 50%, transparent 50%);
  border-bottom-left-radius: 8px;
  pointer-events: none;
}

.brief__anrede {
  font-family: 'Dancing Script', 'Caveat', cursive;
  font-weight: 600;
  font-size: calc(clamp(2.25rem, 5vw, 3.25rem) + 2px);
  line-height: 1.1;
  color: var(--vr-burgund);
  margin: clamp(0.5rem, 2vw, 1rem) 0 clamp(0.75rem, 2vw, 1.25rem);
  transform: rotate(-1deg);
  display: inline-block;
}


/* ==========================================================================
   6. THEMEN SIEGEL (Goldakzent, aktiv = Goldfuellung)
   ========================================================================== */

.brief__themen {
  border: none;
  padding: 0;
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
}
.brief__themen-label {
  display: block;
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  color: var(--vr-text-muted);
  letter-spacing: var(--vr-tracking-wider);
  text-transform: uppercase;
  margin: 0 0 var(--vr-space-sm);
}

.siegel-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--vr-space-2xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.siegel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  padding: var(--vr-space-2xs);
  /* Inaktives Siegel: warmes Creme/Pergament mit Goldring */
  background: radial-gradient(circle at 30% 30%, #fbf6ea, #efe6d2 60%, #e4d7bb 100%);
  border: none;
  border-radius: var(--vr-radius-full);
  outline: 2px solid var(--vr-gold);
  outline-offset: -6px;
  color: var(--vr-burgund);
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-sm);
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  cursor: pointer;
  transition: transform var(--vr-trans-base), box-shadow var(--vr-trans-base), background var(--vr-trans-base), color var(--vr-trans-base);
  box-shadow:
    var(--vr-shadow-sm),
    inset 0 -3px 6px rgba(0, 0, 0, 0.12),
    inset 0 3px 6px rgba(255, 255, 255, 0.5);
}
.siegel::before {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(224, 196, 138, 0.55) 50%, transparent 100%);
  pointer-events: none;
  transform: skewX(-20deg);
}
.siegel:hover::before,
.siegel:focus-visible::before {
  animation: brief-shimmer 0.9s ease-out;
}
.siegel:hover {
  transform: translateY(-3px) rotate(-3deg);
  box-shadow:
    var(--vr-shadow-md),
    inset 0 -3px 6px rgba(0, 0, 0, 0.12),
    inset 0 3px 6px rgba(255, 255, 255, 0.55);
}

/* Aktives Siegel: Goldfuellung (aria-pressed / is-selected) */
.siegel[aria-pressed="true"],
.siegel.is-selected {
  background: radial-gradient(circle at 30% 30%, var(--vr-gold-hell), var(--vr-gold) 60%, var(--vr-gold-tief) 100%);
  color: #2e2114;
  outline-color: var(--vr-gold-hell);
  transform: scale(1.05);
  box-shadow:
    var(--vr-shadow-gold),
    inset 0 -3px 6px rgba(0, 0, 0, 0.2),
    inset 0 3px 6px rgba(255, 255, 255, 0.35);
}
.siegel:focus-visible {
  outline-color: var(--vr-gold-hell);
  outline-offset: 3px;
}


/* ==========================================================================
   7. FELDER
   ========================================================================== */

.brief__felder {
  display: grid;
  gap: var(--vr-space-lg);
}
.brief__feld {
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
}
.brief__feld--row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vr-space-md);
  min-width: 0;
}
.brief__feld--row > * {
  min-width: 0;
}

.brief__label {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-sm);
  color: var(--vr-text-muted);
  letter-spacing: var(--vr-tracking-wide);
  margin: 0 0 var(--vr-space-3xs);
}

.brief__input,
.brief__textarea {
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-md);
  color: var(--vr-anthrazit);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--vr-linie);
  padding: var(--vr-space-2xs) 0;
  outline: none;
  transition: border-color var(--vr-trans-base);
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
}
.brief__input:focus,
.brief__textarea:focus {
  border-bottom-color: var(--vr-gold-tief);
}
.brief__input:focus-visible,
.brief__textarea:focus-visible {
  border-bottom-color: var(--vr-gold-tief);
  box-shadow: 0 1px 0 0 var(--vr-gold-tief), 0 3px 9px -2px var(--vr-gold-tief);
  outline: 2px solid transparent; /* in Windows High-Contrast sichtbarer Fokusring */
  outline-offset: 2px;
}

/* Name / Telefon in Schreibschrift fuer den persoenlichen Brief Look */
.brief__input--script {
  font-family: 'Dancing Script', 'Caveat', cursive;
  font-weight: 600;
  font-size: calc(1.75rem + 6px);
  line-height: 1.4;
  color: var(--vr-burgund);
}

/* --------------------------------------------------------------------------
   TEXTAREA mit liniertem Briefpapier.
   ACHTUNG: Linien Geometrie 1:1 aus der Villa Vorlage uebernommen, damit die
   Handschrift Engine (FONT_SIZE 32 / LINE_HEIGHT 40 / BASELINE_Y 31) sauber
   auf den Linien sitzt. Geaendert wurde ausschliesslich die Linien Farbe
   (jetzt --vr-linie-soft = warmes #e6dcc4) und die Tinten Farbe.
   -------------------------------------------------------------------------- */
.brief__textarea {
  resize: none;
  min-height: 240px;
  line-height: 40px;
  padding-top: 0;
  padding-bottom: 40px;
  overflow: hidden;
  font-family: 'Dancing Script', 'Caveat', cursive;
  font-weight: 600;
  font-size: calc(1.75rem + 6px);
  color: var(--vr-burgund);
  caret-color: var(--vr-burgund);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 31px,
    var(--vr-linie-soft) 31px,
    var(--vr-linie-soft) 32px,
    transparent 32px,
    transparent 40px
  );
}
.brief__textarea:focus {
  box-shadow: none;
}

/* Auto-Grow Konsistenz (Engine misst scrollHeight) */
.brief__textarea-wrap {
  position: relative;
}

/* Honeypot (Spamschutz, unsichtbar) */
.brief__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


/* ==========================================================================
   8. DATENSCHUTZ (Gold-Checkbox als Mini-Siegel)
   ========================================================================== */

.brief__datenschutz {
  display: block;
  font-family: var(--vr-font-body);
  font-size: calc(1rem + 6px);
  line-height: 1.45;
  color: var(--vr-text-secondary);
  cursor: pointer;
}
.brief__datenschutz a {
  color: var(--vr-gold-tief);
  text-decoration: underline;
}
.brief__datenschutz span,
.brief__datenschutz a,
.brief__datenschutz p {
  overflow-wrap: anywhere;
  hyphens: auto;
}

.brief__datenschutz input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  float: left;
  shape-outside: circle(50%);
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin: 0.2rem 0.8rem 0.35rem 0;
  cursor: pointer;
  border-radius: 50%;
  border: 2px dashed var(--vr-gold-tief);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, var(--vr-papier) 0%, #efe6d2 100%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.2s ease;
  flex: 0 0 auto;
}
.brief__datenschutz input[type="checkbox"]:hover {
  border-style: solid;
  transform: scale(1.06);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.6) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, #fdfaf0 0%, #f1e9d6 100%);
}
.brief__datenschutz input[type="checkbox"]:active {
  transform: scale(0.94);
}
.brief__datenschutz input[type="checkbox"]:checked {
  border: 1.5px solid var(--vr-gold);
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232e2114" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>'),
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, var(--vr-gold-hell) 0%, var(--vr-gold) 55%, var(--vr-gold-tief) 100%);
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-size: 62% 62%, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.4),
    inset 0 -1px 3px rgba(0, 0, 0, 0.25),
    0 0 0 2px var(--vr-gold-hell),
    0 2px 6px rgba(201, 169, 110, 0.5);
}
.brief__datenschutz input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--vr-gold);
  outline-offset: 3px;
}


/* ==========================================================================
   9. SENDEN BUTTON (Gold-Verlauf wie Theme-Login-Button)
   ========================================================================== */

.brief__send {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vr-space-2xs);
  align-self: flex-start;
  background: linear-gradient(135deg, #8a6d3b 0%, #c9a96e 55%, #e0c48a 100%);
  color: #241a0e;
  border: 1px solid var(--vr-gold-hell);
  font-family: var(--vr-font-display);
  font-size: var(--vr-text-md);
  font-weight: 600;
  letter-spacing: var(--vr-tracking-wide);
  padding: var(--vr-space-sm) var(--vr-space-xl);
  border-radius: var(--vr-radius-full);
  cursor: pointer;
  transition: transform var(--vr-trans-base), box-shadow var(--vr-trans-base), filter var(--vr-trans-base);
  box-shadow: var(--vr-shadow-gold);
}
.brief__send::before {
  content: '';
  position: absolute; top: 0; left: -120%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  pointer-events: none;
  transform: skewX(-20deg);
}
.brief__send:hover::before,
.brief__send:focus-visible::before,
.brief__send:active::before {
  animation: brief-shimmer 0.9s ease-out;
}
.brief__send:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 14px 28px rgba(201, 169, 110, 0.4);
}
.brief__send:active {
  transform: translateY(0);
}
.brief__send:disabled {
  opacity: 0.6;
  cursor: wait;
}
.brief__send:focus-visible {
  outline: 2px solid var(--vr-gold-hell);
  outline-offset: 3px;
}
.brief__send-icon {
  width: 1.2em;
  height: 1.2em;
  position: relative;
  z-index: 1;
}

@keyframes brief-shimmer {
  0%   { left: -120%; }
  100% { left: 120%; }
}


/* ==========================================================================
   10. STATUS
   ========================================================================== */

.brief__status {
  margin-top: var(--vr-space-md);
  padding: var(--vr-space-sm) var(--vr-space-md);
  border-radius: var(--vr-radius-sm);
  font-family: var(--vr-font-body);
  font-size: var(--vr-text-base);
  display: none;
}
.brief__status.is-success {
  display: block;
  background: rgba(74, 107, 58, 0.12);
  color: var(--vr-success);
  border-left: 4px solid var(--vr-success);
}
.brief__status.is-error {
  display: block;
  background: rgba(160, 40, 48, 0.10);
  color: var(--vr-error);
  border-left: 4px solid var(--vr-error);
}
.brief__status a {
  color: inherit;
  text-decoration: underline;
}


/* ==========================================================================
   11. ANTWORTZEIT / VERSPRECHEN
   ========================================================================== */

.brief-promise {
  text-align: center;
  margin: var(--vr-space-xl) 0 0;
  color: var(--vr-creme);
  font-family: var(--vr-font-hand);
  font-size: var(--vr-text-xl);
  opacity: 0.9;
}


/* ==========================================================================
   12. MOBIL (max-width 600px)
   ========================================================================== */

@media (max-width: 600px) {
  .brief-scene,
  .brief-scene__inner {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .brief {
    padding: clamp(1.25rem, 5vw, 1.75rem);
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Siegel Grid: 3 Spalten, Schrift etwas kleiner gegen Umbruch */
  .siegel-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vr-space-xs);
  }
  .siegel {
    font-size: calc(0.78rem + 5px);
  }

  /* Zwei-Spalten-Felder stacken */
  .brief__feld--row {
    grid-template-columns: 1fr;
  }

  .brief-hero__headline {
    font-size: calc(clamp(1.5rem, 6vw, 1.9rem) + 2px);
  }

  .brief__datenschutz {
    font-size: calc(0.95rem + 5px);
  }

  .brief__send {
    width: 100%;
    padding-left: var(--vr-space-md);
    padding-right: var(--vr-space-md);
  }

  /* Mobile Scroll Sicherung fuer Anrede beim Textarea Focus (iOS) */
  .brief__textarea {
    scroll-margin-top: 120px;
  }
}


/* ==========================================================================
   13. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .siegel,
  .brief__send,
  .brief__datenschutz input[type="checkbox"] {
    transition: none !important;
  }
  .siegel::before,
  .brief__send::before {
    display: none;
  }
}


/* ===== Hero-Zierde (Eyebrow + Goldlinie mit Raute) ===== */
.brief-hero__eyebrow { font-family: 'Josefin Sans', sans-serif; font-size: calc(.7rem + 6px); font-weight: 300; letter-spacing: .5em; text-transform: uppercase; color: var(--vr-gold, #c9a96e); margin: 0 0 1rem; }
.brief-hero__flourish { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.3rem; }
.brief-hero__flourish::before, .brief-hero__flourish::after { content: ''; width: 54px; height: 1px; }
.brief-hero__flourish::before { background: linear-gradient(90deg, transparent, var(--vr-gold, #c9a96e)); }
.brief-hero__flourish::after { background: linear-gradient(90deg, var(--vr-gold, #c9a96e), transparent); }
.brief-hero__diamond { color: var(--vr-gold, #c9a96e); font-size: calc(.55rem + 6px); line-height: 1; }

/* ===== Fehler-Overlay (ueber dem Brief, Hintergrund weichgezeichnet, gleichmaessiger Schatten) ===== */
.dd-brief-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,6,4,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s, visibility .35s; }
.dd-brief-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.dd-brief-overlay__card { background: #f6efe1; color: #2e2114; max-width: 420px; width: 100%; border-radius: 12px; padding: 32px 30px 26px; text-align: center; box-shadow: 0 0 0 1px rgba(201,169,110,0.40), 0 0 55px 6px rgba(0,0,0,0.55); transform: translateY(12px) scale(.98); transition: transform .35s; }
.dd-brief-overlay.is-open .dd-brief-overlay__card { transform: none; }
.dd-brief-overlay__text { font-family: 'Cormorant Garamond', Georgia, serif; font-size: calc(1.3rem + 6px); line-height: 1.45; }
.dd-brief-overlay__text a { color: #8a6d3b; }
.dd-brief-overlay__btn { margin-top: 22px; cursor: pointer; border: none; font-family: 'Josefin Sans', sans-serif; font-size: calc(.72rem + 6px); letter-spacing: .25em; text-transform: uppercase; color: #060606; padding: .7rem 2rem; border-radius: 999px; background-image: linear-gradient(135deg, #8a6d3b, #c9a96e, #e0c48a); }
.dd-brief-overlay__btn:hover { filter: brightness(1.06); }
body.dd-brief-overlay-open { overflow: hidden; }


/* ===== Erfolgs-Siegel im Overlay ===== */
.dd-brief-overlay__seal { display: none; }
.dd-brief-overlay.is-success .dd-brief-overlay__seal { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; color: #060606; font-size: calc(1.55rem + 6px); background-image: linear-gradient(135deg, #8a6d3b, #c9a96e, #e0c48a); box-shadow: 0 6px 22px rgba(201,169,110,0.45); }
.dd-brief-overlay.is-success .dd-brief-overlay__card { box-shadow: 0 0 0 1px rgba(201,169,110,0.50), 0 0 55px 6px rgba(0,0,0,0.55); }