/* ==================================================
   Aus der HTML-Datei ausgelagert
================================================== */

body {
      background:
        radial-gradient(circle at 92% 4%, rgba(168, 212, 138, .22), transparent 28%),
        radial-gradient(circle at 0% 16%, rgba(240, 184, 64, .16), transparent 30%),
        var(--warm, #fffdf7);
    }

    .thanks-hero {
      position: relative;
      min-height: 560px;
      display: grid;
      align-items: end;
      overflow: hidden;
      background: var(--deep, #243320);
    }

    

    .thanks-hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(26,36,22,.08) 0%, rgba(26,36,22,.32) 44%, rgba(26,36,22,.90) 100%),
        radial-gradient(circle at 15% 20%, rgba(255,255,255,.18), transparent 30%);
      pointer-events: none;
    }

    .thanks-hero-content {
      position: relative;
      z-index: 2;
      width: min(1080px, calc(100% - 48px));
      margin: 0 auto;
      padding: 110px 0 66px;
      color: #fff;
    }

    .thanks-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-size: .72rem;
      font-weight: 900;
      letter-spacing: 2.7px;
      text-transform: uppercase;
      color: var(--mint, #a8d48a);
    }

    .thanks-kicker::before {
      content: "💛";
      letter-spacing: 0;
      font-size: 1rem;
    }

    .thanks-hero h1 {
      max-width: 780px;
      font-family: "Fraunces", serif;
      font-size: clamp(2.5rem, 6vw, 5rem);
      line-height: .98;
      font-weight: 900;
      margin-bottom: 18px;
    }

    .thanks-hero p {
      max-width: 760px;
      color: rgba(255,255,255,.84);
      font-size: clamp(1rem, 2vw, 1.15rem);
      line-height: 1.7;
      font-weight: 700;
      margin-bottom: 24px;
    }

    .thanks-hero-actions,
    .thanks-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    

    .btn-hero-light:hover {
      background: #fff;
      box-shadow: 0 10px 28px rgba(0,0,0,.18);
    }

    .ankuendigung {
      background: var(--amber, #f0b840);
      color: var(--ink, #1a2416);
      text-align: center;
      padding: 13px 20px;
      font-size: .9rem;
      font-weight: 900;
      letter-spacing: .15px;
      line-height: 1.45;
      border-bottom: 1px solid rgba(59,94,50,.12);
    }

    .thanks-page {
      padding-top: 72px;
    }

    .thanks-page section {
      margin-top: 72px;
    }

    .thanks-main-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: stretch;
    }

    .thanks-letter,
    .next-card,
    .small-card {
      background: rgba(250,244,232,.94);
      border: 1.5px solid rgba(59,94,50,.12);
      border-radius: var(--radius-xl, 28px);
      box-shadow: 0 14px 42px rgba(26,36,22,.07);
    }

    .thanks-letter {
      padding: clamp(28px, 4vw, 46px);
    }

    .thanks-label {
      font-size: .7rem;
      font-weight: 900;
      letter-spacing: 2.8px;
      text-transform: uppercase;
      color: var(--sage, #6b9e5e);
      margin-bottom: 9px;
    }

    .thanks-letter h2,
    .next-card h2 {
      font-family: "Fraunces", serif;
      color: var(--ink, #1a2416);
      font-weight: 900;
      line-height: 1.1;
      font-size: clamp(1.75rem, 3.1vw, 2.55rem);
      margin-bottom: 14px;
    }

    .thanks-letter p,
    .next-card p,
    .small-card p {
      color: #54634c;
      font-size: .98rem;
      line-height: 1.76;
    }

    .thanks-letter p + p,
    .next-card p + p {
      margin-top: 14px;
    }


    .next-card {
      padding: clamp(28px, 4vw, 44px);
      background:
        radial-gradient(circle at 92% 15%, rgba(255,255,255,.78), transparent 34%),
        linear-gradient(135deg, #f5ead2 0%, #d9e4cc 62%, #b8cba7 100%);
    }

    .next-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 24px;
    }

    .small-card {
      padding: 22px 20px;
      background: rgba(250,244,232,.84);
    }

    .small-card strong {
      display: block;
      font-family: "Fraunces", serif;
      color: var(--ink, #1a2416);
      font-size: 1.14rem;
      line-height: 1.15;
      margin-bottom: 8px;
    }

    .thanks-actions {
      margin-top: 22px;
    }

    .soft-note {
      margin-top: 22px;
      padding: 16px 18px;
      border-radius: 18px;
      background: rgba(59,94,50,.07);
      color: #4c5f43;
      line-height: 1.65;
      font-weight: 800;
    }

    @media (max-width: 920px) {
      .thanks-main-grid,
      .next-steps {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 620px) {
      .thanks-hero {
        min-height: 540px;
      }

      .thanks-hero-content {
        width: calc(100% - 32px);
        padding-bottom: 46px;
      }

      .thanks-page {
        padding-top: 46px;
      }

      .thanks-page section {
        margin-top: 54px;
      }

      .thanks-hero-actions,
      .thanks-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .thanks-hero-actions .btn,
      .thanks-actions .btn {
        width: 100%;
      }
    }