:root {
  --lss-primary: #0F82A8;
  --lss-primary-dark: #0A3D54;
  --lss-light: #F8FBFF;
  --lss-light-2: #F0F8FC;
  --lss-text: #3F4145;
  --lss-cyan: #19C6C6;
  --lss-green: #2EE7A6;
  --lss-violet: #8A5CF6;
  --lss-ui-font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --lss-hand-font: "Caveat", "Segoe Script", "Bradley Hand", cursive;
  --lss-doc-max: 1280px;
}

html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  background: var(--lss-light-2);
  color: var(--lss-text);
  font-family: var(--lss-ui-font);
  -webkit-font-smoothing: antialiased;
}

#stage { min-height: 100vh; }
.document { width: 100%; max-width: var(--lss-doc-max); margin: 0 auto; background: #fff; }
@media (min-width: 1320px) { .document { box-shadow: 0 8px 40px rgba(10, 61, 84, 0.08); margin: 24px auto; } }
.document .lss-section { position: relative; }

/* ------------------------------------------------------------------ Intro */
/* Ein Briefumschlag steigt auf, öffnet sich und gibt den Brief frei, während
   das Angebot im Hintergrund geladen wird. Ist es fertig, wächst der Brief über
   den ganzen Bildschirm und gibt dabei das Angebot frei. */

.intro {
  /* Ziel der Aufblend-Animation. measureIntroZoom() ersetzt die Werte durch die
     echten Maße; die Vorgabe passt zur 420x340-Szene und deckt gängige Fenster ab. */
  --intro-zoom: 6;
  --intro-tx: 0px;
  --intro-ty: -59px;
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 50% 20%, #ffffff 0%, var(--lss-light-2) 55%, #dceaf1 100%);
}
.intro.is-leaving { animation: intro-out .45s ease forwards; }

.intro-scene {
  position: relative;
  width: 420px;
  height: 340px;
  max-width: calc(100vw - 48px);
  perspective: 1400px;
  transform-style: preserve-3d;
  animation: intro-rise 1.4s cubic-bezier(.16, .8, .26, 1) both;
}
@media (max-width: 480px) { .intro-scene { transform: scale(.78); } }

.intro-letter {
  position: absolute;
  left: 34px;
  top: 118px;
  width: 352px;
  height: 222px;
  z-index: 2;
  box-sizing: border-box;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 22px 55px rgba(10, 61, 84, .28);
  animation: intro-letter 1.5s cubic-bezier(.16, .8, .26, 1) 2.6s both;
}
.intro-letter-logo { width: 132px; height: auto; display: block; }
.intro-letter-rule { width: 40px; height: 2px; background: var(--lss-cyan); border-radius: 1px; }
.intro-letter-line {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e6eef3 25%, #f5fafc 50%, #e6eef3 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}
.intro-letter-line.w90 { width: 90%; }
.intro-letter-line.w75 { width: 75%; }
.intro-letter-line.w60 { width: 60%; }

.intro-envelope {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 420px;
  height: 236px;
  z-index: 3;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(160deg, #10557a 0%, var(--lss-primary-dark) 100%);
  box-shadow: 0 30px 70px rgba(10, 61, 84, .38);
}
.intro-envelope::before,
.intro-envelope::after {
  content: '';
  position: absolute;
  inset: 0;
}
/* to bottom right / to top right statt fester 45deg: nur mit den Schluesselwoertern laeuft die
   50-%-Linie des Verlaufs genau durch die Ecken, sonst schneidet das X bei 420x236 daneben. */
.intro-envelope::before { background: linear-gradient(to bottom right, transparent 49.5%, rgba(25, 198, 198, .18) 49.8%, rgba(25, 198, 198, .18) 50.2%, transparent 50.5%); }
.intro-envelope::after { background: linear-gradient(to top right, transparent 49.5%, rgba(25, 198, 198, .18) 49.8%, rgba(25, 198, 198, .18) 50.2%, transparent 50.5%); }

.intro-flap {
  position: absolute;
  left: 0;
  top: 104px;
  width: 420px;
  height: 158px;
  z-index: 4;
  background: linear-gradient(180deg, #14688f 0%, #0d4a66 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  animation: intro-flap 1.2s cubic-bezier(.6, .02, .25, 1) 1.4s forwards;
}

/* Das Siegel ist das Favicon - es bringt seinen eigenen Kreis mit, daher kein Hintergrund hier. */
.intro-seal {
  position: absolute;
  left: 50%;
  top: 214px;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 5px 16px rgba(10, 61, 84, .45);
  animation: intro-seal .55s ease 1.45s forwards;
}
.intro-seal img { display: block; width: 100%; height: 100%; }

.intro-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -54px;
  margin: 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(10, 61, 84, .5);
  animation: intro-hint .6s ease 1.9s both;
}

@keyframes intro-rise { 0% { transform: translateY(140%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
/* Die aufgeklappte Lasche bleibt sichtbar (keine backface-visibility) und wandert dabei hinter
   den Brief. Bei 50 % steht sie hochkant und ist unsichtbar - dort wechseln z-index und
   Verlaufsrichtung: die Rueckseite spiegelt den Verlauf, das Umdrehen gleicht es aus, damit die
   offene Lasche dasselbe Blau in derselben Richtung zeigt wie die geschlossene. */
@keyframes intro-flap {
  from { transform: rotateX(0deg); z-index: 4; background-image: linear-gradient(180deg, #14688f 0%, #0d4a66 100%); }
  50% { z-index: 4; background-image: linear-gradient(180deg, #14688f 0%, #0d4a66 100%); }
  51% { z-index: 1; background-image: linear-gradient(0deg, #14688f 0%, #0d4a66 100%); }
  to { transform: rotateX(-178deg); z-index: 1; background-image: linear-gradient(0deg, #14688f 0%, #0d4a66 100%); }
}
@keyframes intro-seal { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -62%) scale(.7); } }
@keyframes intro-letter { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-176px); opacity: 1; } }
@keyframes intro-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

/* Ist das Angebot geladen, wächst der Brief bildschirmfüllend und wird zum Dokument. */
@keyframes intro-open {
  from { transform: translate(0px, -176px) scale(1); border-radius: 4px; box-shadow: 0 22px 55px rgba(10, 61, 84, .28); }
  to { transform: translate(var(--intro-tx), var(--intro-ty)) scale(var(--intro-zoom)); border-radius: 0; box-shadow: 0 0 0 rgba(10, 61, 84, 0); }
}
/* Umschlag und aufgeklappte Lasche fahren nach unten aus dem Bild, statt zu verschwinden.
   Beide brauchen ein explizites from, sonst springt die Lasche auf ihren Ausgangswinkel zurück. */
@keyframes intro-open-envelope { from { transform: translateY(0); } to { transform: translateY(420px); } }
@keyframes intro-open-flap {
  from { transform: translateY(0) rotateX(-178deg); background-image: linear-gradient(0deg, #14688f 0%, #0d4a66 100%); }
  to { transform: translateY(420px) rotateX(-178deg); background-image: linear-gradient(0deg, #14688f 0%, #0d4a66 100%); }
}
@keyframes intro-open-fade { to { opacity: 0; } }

/* Der Hintergrund bleibt deckend, solange der Brief wächst - erst wenn er den Bildschirm
   ausfüllt, blenden Intro und Dokument gegeneinander über (siehe intro-pending unten). */
.intro.is-opening .intro-scene { animation: none; }
.intro.is-opening .intro-letter {
  z-index: 10;
  animation: intro-open .85s cubic-bezier(.5, 0, .3, 1) forwards;
}
.intro.is-opening .intro-letter > * { opacity: 0; transition: opacity .25s ease; }
.intro.is-opening .intro-envelope { animation: intro-open-envelope .85s cubic-bezier(.5, 0, .3, 1) forwards; }
.intro.is-opening .intro-flap { animation: intro-open-flap .85s cubic-bezier(.5, 0, .3, 1) forwards; }
.intro.is-opening .intro-caption { animation: intro-open-fade .3s ease forwards; }

/* Das Angebot ist unter dem Intro schon fertig gerendert, bleibt aber unsichtbar, bis die
   Animation durch ist. dismissIntro() nimmt die Klasse ab; der Übergang läuft dann gegen
   das ausblendende Intro. */
body > :not(.intro) { transition: opacity .45s ease; }
body.intro-pending > :not(.intro) { opacity: 0; }
@media print { body.intro-pending > :not(.intro) { opacity: 1; } }
@keyframes intro-hint { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .intro-scene, .intro-letter, .intro-flap, .intro-seal, .intro-caption,
  .intro.is-opening .intro-letter { animation: none; }
  .intro-letter { transform: translateY(-176px); }
  .intro-flap { transform: rotateX(-178deg); z-index: 1; background-image: linear-gradient(0deg, #14688f 0%, #0d4a66 100%); }
  .intro-seal { opacity: 0; }
  .intro-letter-line { animation: none; }
}

/* Neutral notice page */
.notice-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; box-sizing: border-box; }
.notice-card { max-width: 520px; text-align: center; background: #fff; padding: 40px 32px; border-radius: 14px; box-shadow: 0 8px 40px rgba(10, 61, 84, 0.08); }
.notice-card h1 { font-size: 22px; font-weight: 600; color: var(--lss-primary-dark); margin: 0 0 12px; }
.notice-card p { margin: 0; line-height: 1.5; }

/* Banners */
#banners { position: sticky; top: 0; z-index: 50; display: flex; flex-direction: column; }
.banner { padding: 10px 20px; font-size: 14px; line-height: 1.45; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; }
.banner-warning { background: #fff4d6; color: #6b4a00; border-bottom: 1px solid #f0d58a; }
.banner-info { background: #e3f4fa; color: var(--lss-primary-dark); border-bottom: 1px solid #b7dfec; }
.banner-subtle { background: #eef1f4; color: #6b7178; font-size: 12px; padding: 5px 16px; }
.banner a { color: var(--lss-primary); font-weight: 600; text-decoration: underline; }

/* Buttons */
.btn { font: inherit; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; line-height: 1; transition: background .15s, box-shadow .15s; }
.btn:focus-visible { outline: 3px solid rgba(15, 130, 168, 0.35); outline-offset: 2px; }
.btn-primary { background: var(--lss-primary); color: #fff; }
.btn-primary:hover { background: #0c6d8d; }
.btn-primary:disabled { background: #9cc4d3; cursor: default; }
.btn-ghost { background: transparent; color: var(--lss-primary-dark); border-color: #c5d6de; }
.btn-ghost:hover { background: #fff; }

/* Print control */
.print-control { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.print-control .btn { box-shadow: 0 6px 24px rgba(10, 61, 84, 0.25); }
.print-hint { max-width: 280px; background: var(--lss-primary-dark); color: #fff; font-size: 12px; line-height: 1.4; padding: 10px 12px; border-radius: 8px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .15s, transform .15s; order: -1; }
.print-control:hover .print-hint, .print-control:focus-within .print-hint { opacity: 1; transform: none; }

/* Consent bar */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; margin: 0 auto; max-width: 720px; background: #fff; border: 1px solid #d5e3ea; border-radius: 14px; box-shadow: 0 10px 40px rgba(10, 61, 84, 0.18); padding: 16px 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.consent p { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; }
.consent-actions { display: flex; gap: 8px; margin-left: auto; }
.consent:not([hidden]) ~ .print-control { bottom: 120px; }
@media (min-width: 900px) { .consent:not([hidden]) ~ .print-control { bottom: 20px; } .consent { right: 260px; } }

/* --------------------------------------------------------------- Signatur */
/* Im Dokument steht nur eine kompakte Aufforderung; unterschrieben wird im Dialog. */

.lss-signature { margin: 32px 0 0; font-family: var(--lss-ui-font); color: var(--lss-text); break-inside: avoid; }

.sig-cta {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  padding: 20px 24px;
  border: 1px solid #d5e3ea;
  border-radius: 12px;
  background: var(--lss-light);
}
.sig-cta-text { flex: 1 1 260px; }
.sig-cta h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--lss-primary-dark); }
.sig-cta p { margin: 0; font-size: 14px; line-height: 1.5; }

/* Der Stempel: Rahmen, Unterschrift, darunter Datum und Uhrzeit. */
.sig-stamped { display: flex; }
.stamp {
  position: relative;
  min-width: 260px;
  max-width: 380px;
  padding: 14px 22px 12px;
  border: 2px solid var(--lss-primary-dark);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(10, 61, 84, .35);
  color: var(--lss-primary-dark);
  background: rgba(255, 255, 255, .6);
  text-align: center;
  transform: rotate(-1.6deg);
}
.stamp-label { font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.stamp-mark { display: block; width: 100%; max-width: 300px; margin: 6px auto 2px; height: auto; mix-blend-mode: multiply; }
.stamp-name { font-size: 15px; font-weight: 600; }
.stamp-rule { height: 1px; margin: 8px 0 6px; background: rgba(10, 61, 84, .35); }
.stamp-date { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .8; }

/* Dialog */
.sig-dialog {
  width: min(560px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: var(--lss-text);
  font-family: var(--lss-ui-font);
  box-shadow: 0 24px 70px rgba(10, 61, 84, .3);
}
.sig-dialog::backdrop { background: rgba(10, 61, 84, .45); }
.sig-dialog form { margin: 0; padding: 24px; }
.sig-dialog h3 { margin: 0 0 4px; font-size: 19px; font-weight: 600; color: var(--lss-primary-dark); }
.sig-dialog .sig-lead { margin: 0 0 18px; font-size: 14px; line-height: 1.5; }
.sig-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.sig-dialog label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: #5d6470; }
.sig-dialog input[type="text"], .sig-dialog input[type="email"] { font: inherit; font-size: 15px; font-weight: 400; padding: 10px 12px; border: 1px solid #c5d6de; border-radius: 8px; background: #fff; color: var(--lss-text); box-sizing: border-box; }
.sig-dialog input:focus { outline: 2px solid rgba(15, 130, 168, 0.35); border-color: var(--lss-primary); }
.sig-mode { display: inline-flex; border: 1px solid #c5d6de; border-radius: 999px; padding: 3px; background: #fff; margin-bottom: 12px; }
.sig-mode button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--lss-primary-dark); cursor: pointer; }
.sig-mode button[aria-pressed="true"] { background: var(--lss-primary); color: #fff; }
.sig-pad { position: relative; background: #fff; border: 1px dashed #9cb8c6; border-radius: 10px; overflow: hidden; }
.sig-pad canvas { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; }
.sig-pad .sig-baseline { position: absolute; left: 24px; right: 24px; bottom: 34px; border-bottom: 1px solid #c5d6de; pointer-events: none; }
.sig-pad .sig-clear { position: absolute; top: 8px; right: 8px; font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid #c5d6de; background: #fff; color: #5d6470; cursor: pointer; }
.sig-typed { display: none; }
.sig-typed input { width: 100%; box-sizing: border-box; font-family: var(--lss-hand-font) !important; font-size: 40px !important; padding: 18px 20px !important; height: 170px; border-style: dashed !important; text-align: center; }
.sig-dialog[data-mode="typed"] .sig-pad { display: none; }
.sig-dialog[data-mode="typed"] .sig-typed { display: block; }
.sig-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.sig-actions .sig-spacer { flex: 1 1 auto; }
.sig-error { color: #a3341c; font-size: 13px; flex-basis: 100%; }

@media print {
  body { background: #fff; }
  .document { max-width: none; margin: 0; box-shadow: none; }
  .lss-noprint, #banners, .print-control, .consent, .intro, .sig-dialog, .sig-cta { display: none !important; }
  .stamp { background: #fff; }
}