/* ============================================================
   brief-handschrift.css  v3.2.9  Villa Restaurant Soemmerda
   ------------------------------------------------------------
   Phase 3.2.9 Hotfix gegenueber v3.2.8.
   - Contact Actions Section kompakter. Der grosse cremefarbene
     Bereich unter den drei Action Buttons (Tisch sichern,
     Zimmer buchen, Erik anrufen) hat den Footer aus dem Viewport
     geschoben. padding-top und padding-bottom werden reduziert
     damit der Footer ohne Scroll sichtbar wird.

   Phase 3.2.8 Hotfix gegenueber v3.2.6.
   - Anrede font-weight von 700 auf 600 fuer leichteren Look.

   Phase 3.2.6 Hotfix gegenueber v3.2.5.
   - Anrede 2 Pixel kleiner als v3.2.5 (von +1 auf -1 vs Original).
   - Mobile scroll-margin-top auf Textarea damit die Anrede beim
     Focus auf Mobile nicht aus dem Viewport scrollt.

   Phase 3.2.5 Hotfix gegenueber v3.2.2.
   - Anrede plus 1 Pixel via calc clamp.
   - Mobile Siegel Layout 3 Spalten statt 2 ab 540 Pixel
     abwaerts. Schrift einen Tick kleiner damit auch bei
     320 Pixel Bildschirmbreite kein Umbruch entsteht.
   - Aenderungen ausschliesslich additiv. contact.css bleibt
     unangetastet, wir ueberschreiben gezielt mit !important.

   Phase 3.2.2 Hotfix gegenueber v3.2.1.
   - Anrede Cloak greift jetzt wirklich. !important plus
     hoehere Spezifitaet via body Praefix damit contact.css
     ueberschrieben wird.
   - Doppelte Federn unmoeglich gemacht durch data-anrede-running
     Attribut auf .brief__feld das alle Federn im Feld waehrend
     der Anrede Animation hart auf opacity 0 und visibility
     hidden zwingt.

   Phase 3.2.1 Hotfix gegenueber v3.2.
   - Anrede ist standardmaessig transparent (kein FOUC). Sie
     wird erst nach Animation oder bei Fallback sichtbar via
     Klasse is-anrede-revealed.
   - prefers-reduced-motion und print zeigen Anrede sofort.

   Phase 3.2 Changelog gegenueber v3.1.1.
   - Anrede Animation Styles.
   - .brief__anrede bekommt position relative damit SVG und
     Federkiel absolut darin sitzen koennen.
   - .brief__anrede.is-anrede-prepared blendet den Originaltext
     temporaer aus indem color auf transparent gesetzt wird.
   - .brief__hw-anrede-svg fuer das Overlay.
   - .brief__hw-anrede-feder fuer den Anrede Federkiel.
   - prefers-reduced-motion zeigt Anrede sofort ohne Animation.
   - Print blendet Anrede SVG und Federkiel aus.

   Phase 3.1.1 Hotfix gegenueber v3.1.
   - Skip und Replay Button Position auf bottom right.

   Phase 3.1 Changelog gegenueber v2.0.
   1. Selection Fix. ::selection setzt color auf transparent,
      damit beim Markieren keine doppelten Buchstaben sichtbar
      werden. Nur Hintergrund Tint bleibt.
   2. Skip Button .brief__hw-skip neu. Erscheint waehrend einer
      laufenden Paste Animation, klickbar zum Ueberspringen.
   3. Replay Button .brief__hw-replay neu. Erscheint sobald die
      Textarea Inhalt hat und keine Animation laeuft, klickbar
      zum erneuten Abspielen. Beschriftung Animation ansehen.
   4. Beide Buttons mit weichem Fade, A11y Focus Ring,
      Touch tauglich Mindesthoehe 44 Pixel inklusive Padding.
   5. Print Variante blendet Buttons mit aus.
   ============================================================ */

/* Parent als Buehne fuer die absoluten Children */
.brief__feld {
  position: relative;
}

/* SVG Overlay mit den animierten Buchstaben */
.brief__hw-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

/* Federkiel SVG */
.brief__hw-feder {
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 3;
  transform-origin: 11% 93%;
  opacity: 0;
  will-change: transform, left, top, opacity;
  top: 0;
  left: 0;
}

.brief__hw-feder svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.35));
  transition: filter 200ms ease;
}

/* Engine ready Zustand. Wird per JS gesetzt:
   <div class="brief__feld" data-handschrift-ready="true"> */
.brief__feld[data-handschrift-ready="true"] .brief__textarea {
  color: transparent !important;
  caret-color: transparent !important;
}

/* Phase 3.1 Selection Fix.
   Color auf transparent halten, damit die unsichtbare
   Textarea beim Markieren keine doppelten Buchstaben zeigt.
   Nur der Hintergrund wird in Burgund Tint sichtbar. */
.brief__feld[data-handschrift-ready="true"] .brief__textarea::selection {
  background: rgba(110, 26, 36, 0.28);
  color: transparent;
}
.brief__feld[data-handschrift-ready="true"] .brief__textarea::-moz-selection {
  background: rgba(110, 26, 36, 0.28);
  color: transparent;
}

/* Textarea soll innerhalb von brief__feld als oberste Schicht liegen.
   Sie behaelt ihre Original Styles von contact.css. */
.brief__feld[data-handschrift-ready="true"] .brief__textarea {
  position: relative;
  z-index: 2;
  background-color: transparent;
}

/* Bestehender pulsierender Stift aus contact.css wird ausgeblendet,
   sobald unsere Engine ready ist. Im Fallback bleibt er sichtbar. */
.brief__feld[data-handschrift-ready="true"] .brief__pen {
  display: none !important;
}

/* Federkiel Focus Glow */
.brief__feld[data-handschrift-ready="true"]:focus-within .brief__hw-feder svg {
  filter: drop-shadow(2px 3px 6px rgba(110, 26, 36, 0.55))
          drop-shadow(0 0 8px rgba(184, 146, 74, 0.3));
}

/* ============================================================
   Phase 3.1.1 Skip und Replay Buttons
   Position unten rechts in der ohnehin leeren Zeile am
   Brief Ende. Damit kein Overlap mit der Anrede oder dem
   eigentlichen Schreibbereich.
   ============================================================ */

.brief__hw-skip,
.brief__hw-replay {
  position: absolute;
  bottom: 12px;
  right: 16px;
  top: auto;
  z-index: 5;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 16px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--vr-burgund, #6E1A24);
  background: rgba(255, 252, 242, 0.94);
  border: 1px solid rgba(110, 26, 36, 0.32);
  border-radius: 20px;

  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;

  /* Sauberer Touch und kein iOS Tap Highlight */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  backdrop-filter: blur(4px);
}

.brief__hw-skip.is-visible,
.brief__hw-replay.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.brief__hw-skip:hover,
.brief__hw-replay:hover {
  background: var(--vr-burgund, #6E1A24);
  color: #FFFCF2;
  border-color: var(--vr-burgund, #6E1A24);
}

.brief__hw-skip:active,
.brief__hw-replay:active {
  transform: translateY(1px);
}

.brief__hw-skip:focus-visible,
.brief__hw-replay:focus-visible {
  outline: 2px solid var(--vr-gold, #B8924A);
  outline-offset: 2px;
}

/* Kleines Symbol Element inside */
.brief__hw-skip .brief__hw-icon,
.brief__hw-replay .brief__hw-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* Reduced Motion. Wer Animationen abschaltet, sieht normale Textarea.
   SVG und Federkiel und Buttons weg, Textarea wieder sichtbar in Burgund. */
@media (prefers-reduced-motion: reduce) {
  .brief__feld[data-handschrift-ready="true"] .brief__hw-svg,
  .brief__feld[data-handschrift-ready="true"] .brief__hw-feder,
  .brief__feld[data-handschrift-ready="true"] .brief__hw-skip,
  .brief__feld[data-handschrift-ready="true"] .brief__hw-replay {
    display: none !important;
  }
  .brief__feld[data-handschrift-ready="true"] .brief__textarea {
    color: var(--vr-burgund, #6E1A24) !important;
    caret-color: var(--vr-burgund, #6E1A24) !important;
  }
  .brief__feld[data-handschrift-ready="true"] .brief__pen {
    display: block !important;
  }
}

/* Print Variante. Beim Drucken keine Animation Spuren. */
@media print {
  .brief__hw-svg,
  .brief__hw-feder,
  .brief__hw-skip,
  .brief__hw-replay {
    display: none !important;
  }
  .brief__feld[data-handschrift-ready="true"] .brief__textarea {
    color: #000 !important;
  }
}

/* ============================================================
   Phase 3.2 plus 3.2.1 plus 3.2.2 Anrede Animation
   - v3.2.2 nutzt !important plus body Praefix als hoehere
     Spezifitaet damit contact.css garantiert ueberschrieben
     wird. Andernfalls bleibt der Originaltext sichtbar
     waehrend die SVG Animation drueberzeichnet.
   - Anrede ist standardmaessig transparent.
   - Klasse is-anrede-revealed macht den Originaltext sichtbar
     nach Animation Ende oder bei Fallback.
   - Federkiel und SVG werden absolut darin positioniert.
   - Doppel Feder Schutz via data-anrede-running auf .brief__feld
   ============================================================ */

body .brief__anrede,
.brief__anrede {
  position: relative;
  color: transparent !important;
  transition: color 280ms ease;
}

body .brief__anrede.is-anrede-revealed,
.brief__anrede.is-anrede-revealed {
  color: var(--vr-burgund, #6E1A24) !important;
}

/* Alte Klasse aus v3.2 bleibt fuer Backwards Compat als Sync */
.brief__anrede.is-anrede-prepared {
  color: transparent !important;
}

.brief__hw-anrede-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.brief__hw-anrede-feder {
  position: absolute;
  width: 56px;
  height: 56px;
  pointer-events: none;
  z-index: 3;
  transform-origin: 11% 93%;
  opacity: 0;
  will-change: transform, left, top, opacity;
  top: 0;
  left: 0;
  transition: opacity 220ms ease;
}

.brief__hw-anrede-feder svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.35));
}

/* v3.2.2 Doppel Feder Schutz.
   Solange die Anrede Animation laeuft, sind ALLE Federn
   innerhalb von .brief__feld unsichtbar. Setzt JS ueber
   data-anrede-running="true". */
.brief__feld[data-anrede-running="true"] .brief__hw-feder,
.brief__feld[data-anrede-running="true"] .brief__pen {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Reduced Motion: Anrede sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  body .brief__anrede,
  .brief__anrede {
    color: var(--vr-burgund, #6E1A24) !important;
    transition: none !important;
  }
  .brief__hw-anrede-svg,
  .brief__hw-anrede-feder {
    display: none !important;
  }
}

/* Print: Anrede normal, keine Animation Spuren */
@media print {
  .brief__hw-anrede-svg,
  .brief__hw-anrede-feder {
    display: none !important;
  }
  body .brief__anrede,
  .brief__anrede {
    color: #000 !important;
  }
}

/* ============================================================
   Phase 3.2.5 Feinschliff
   ============================================================ */

/* Anrede 1 Pixel kleiner als contact.css Originalwert.
   contact.css setzt font-size: clamp(2.25rem, 5vw, 3.25rem)
   v3.2.6 minus 1 Pixel.
   v3.2.8 font-weight von 700 auf 600. */
body .brief__anrede,
.brief__anrede {
  font-size: calc(clamp(2.25rem, 5vw, 3.25rem) - 1px) !important;
  font-weight: 600 !important;
}

/* Mobile Siegel Layout: 3 Spalten statt 2 ab 540 Pixel
   abwaerts. Schriftgroesse leicht reduziert damit auch
   bei 320 Pixel Geraetebreite kein Umbruch entsteht. */
@media (max-width: 540px) {
  .siegel-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .siegel {
    font-size: 0.78rem !important;
  }
  /* Mobile Scroll Sicherung. Wenn iOS Safari die Textarea
     beim Focus in den View scrollt, bleibt oben Platz fuer
     die Anrede. JS scrollt zusaetzlich aktiv. */
  .brief__textarea {
    scroll-margin-top: 120px !important;
  }
}

/* ============================================================
   Phase 3.2.9 Contact Actions Section kompakter.
   - Die Section .contact-actions hatte zu viel padding-bottom
     wodurch der Footer aus dem Viewport rutschte.
   - Wir reduzieren padding-top und padding-bottom auf
     vr-space-md damit die Section nur so hoch wird wie sie
     fuer die Buttons selbst noetig ist.
   - !important schlaegt die anfahrt.css Tuning Regel und die
     contact.css Default Regel.
   ============================================================ */
section.contact-actions {
  padding-top: var(--vr-space-md) !important;
  padding-bottom: var(--vr-space-md) !important;
  min-height: 0 !important;
  height: auto !important;
}
section.contact-actions .contact-actions__inner {
  padding-block: 0 !important;
  margin-block: 0 !important;
}