/* Julimomente – Kennenlern-Funnel (self-contained, aus Prototyp). */
:root{
    --paper:#F7F2EB; --cream:#EFE7DB; --sand:#E4D7C5; --taupe:#C7B29B;
    --reh:#B3865B; --mocha:#9B7B5B; --espresso:#43392F; --sage:#97A186;
    --font-title:'Instrument Serif',Georgia,serif;
    --font-body:'Work Sans','Segoe UI',sans-serif;
    --edge:clamp(20px,5vw,64px);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:var(--font-body);font-weight:300;color:var(--espresso);
    background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;}
  a{color:inherit;text-decoration:none;}
  ::selection{background:var(--reh);color:var(--paper);}

  /* subtle sunrise backdrop */
  body::before{content:"";position:fixed;left:50%;top:-14vh;translate:-50% 0;
    width:min(120vw,1100px);height:min(120vw,1100px);border-radius:50%;z-index:0;
    background:radial-gradient(circle,rgba(179,134,91,.14),rgba(179,134,91,.05) 45%,transparent 66%);}

  .wrap{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:26px var(--edge) 64px;}

  /* header */
  .top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:40px;}
  .wm{font-family:var(--font-title);font-size:1.3rem;letter-spacing:.22em;color:var(--espresso);}
  .exit{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);
    border-bottom:1px solid transparent;transition:border-color .3s;}
  .exit:hover{border-color:var(--mocha);}

  /* progress */
  .progress{margin-bottom:34px;}
  .progress-meta{display:flex;justify-content:space-between;align-items:baseline;
    font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mocha);margin-bottom:10px;}
  .bar{height:3px;background:var(--sand);border-radius:3px;overflow:hidden;}
  .bar span{display:block;height:100%;width:20%;background:var(--reh);
    border-radius:3px;transition:width .5s cubic-bezier(.5,.1,.1,1);}

  /* steps */
  .step{display:none;animation:fade .5s ease;}
  .step.active{display:block;}
  @keyframes fade{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
  .eyebrow{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mocha);margin-bottom:14px;}
  .q{font-family:var(--font-title);font-weight:400;line-height:1.1;
    font-size:clamp(1.8rem,4.6vw,2.8rem);max-width:16ch;margin-bottom:6px;}
  .q em{font-style:italic;color:var(--reh);}
  .hint{color:#6b5f52;font-size:.98rem;margin-bottom:30px;max-width:46ch;}

  /* option cards */
  .options{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  @media(max-width:520px){.options{grid-template-columns:1fr;}}
  .opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
    background:#fff;border:1px solid var(--sand);border-radius:4px;padding:20px 20px;
    font-family:var(--font-body);font-size:1.02rem;font-weight:400;color:var(--espresso);
    transition:border-color .25s,box-shadow .25s,transform .25s,background .25s;}
  .opt:hover{border-color:var(--reh);box-shadow:0 6px 22px rgba(155,123,91,.14);transform:translateY(-2px);}
  .opt.selected{border-color:var(--reh);background:var(--cream);}
  .opt .dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--taupe);
    position:relative;transition:border-color .25s;}
  .opt.selected .dot{border-color:var(--reh);}
  .opt.selected .dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--reh);}

  .backrow{margin-top:26px;}
  .back{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mocha);
    cursor:pointer;background:none;border:0;font-family:var(--font-body);display:inline-flex;align-items:center;gap:8px;}
  .back:hover{color:var(--espresso);}
  .back[hidden]{display:none;}

  /* contact form */
  .field{margin-bottom:18px;}
  .field label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--mocha);margin-bottom:7px;}
  .field input,.field textarea{width:100%;font-family:var(--font-body);font-size:1rem;font-weight:300;
    color:var(--espresso);background:#fff;border:1px solid var(--sand);border-radius:4px;
    padding:14px 16px;transition:border-color .25s,box-shadow .25s;}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--reh);box-shadow:0 0 0 3px rgba(179,134,91,.12);}
  .field textarea{min-height:104px;resize:vertical;}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  @media(max-width:520px){.grid2{grid-template-columns:1fr;}}
  .consent{display:flex;gap:12px;align-items:flex-start;margin:8px 0 26px;font-size:.86rem;color:#6b5f52;}
  .consent input{margin-top:3px;width:17px;height:17px;accent-color:var(--reh);flex:0 0 auto;}
  .consent a{border-bottom:1px solid var(--mocha);}
  .btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-body);font-weight:500;
    font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;padding:17px 34px;border-radius:3px;
    background:var(--espresso);color:var(--paper);border:1px solid var(--espresso);cursor:pointer;
    transition:background .3s,transform .3s;}
  .btn:hover{background:#2f2820;transform:translateY(-2px);}
  .reassure{margin-top:18px;font-size:.84rem;color:var(--mocha);display:flex;align-items:center;gap:9px;}
  .reassure svg{width:16px;height:16px;flex:0 0 auto;}

  .note{margin-top:40px;font-size:.72rem;color:var(--taupe);text-align:center;letter-spacing:.04em;}

/* Honeypot – für Menschen unsichtbar */
.jm-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}