/* ----------------------------------------------------------------
     Cheftresor-Markenfarben: Navy #232C37, Magenta #AA164A, Gold #CD9A45
     ---------------------------------------------------------------- */
  :root{
    --navy:#232C37;
    --magenta:#AA164A;
    --gold:#CD9A45;
    --paper:#FFFFFF;
    --bg:#EEF1F4;
    --ink:#232C37;
    --muted:#5A6472;
    --line:#DDE2E8;
    --magenta-tint:#FBEEF2;
    --magenta-border:#E7B8C7;
    --focus:#CD9A45;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *,*::before,*::after{box-sizing:inherit;}
  html{scroll-padding-top:env(safe-area-inset-top,0px);}
  body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{
    max-width:660px;
    margin:0 auto;
    padding:32px 20px 64px;
  }
  .card{
    background:var(--paper);
    border:1px solid var(--line);
    border-top:4px solid var(--gold);
    border-radius:10px;
    overflow:hidden;
  }
  .card__head{
    padding:34px 32px 26px;
    border-bottom:1px solid var(--line);
  }
  .brand{
    font-size:13px;
    letter-spacing:.14em;
    font-weight:bold;
    color:var(--magenta);
    margin:0 0 14px;
  }
  h1{
    font-size:28px;
    line-height:1.2;
    margin:0 0 10px;
    color:var(--navy);
  }
  .lead{
    margin:0;
    color:var(--muted);
    font-size:15px;
    max-width:52ch;
  }
  .meta{
    margin:16px 0 0;
    font-size:13px;
    color:var(--muted);
  }
  form{padding:8px 32px 32px;}
  .q{
    padding:28px 0;
    border-bottom:1px solid var(--line);
  }
  .q:last-of-type{border-bottom:none;}
  .q__num{
    display:inline-block;
    min-width:26px;
    color:var(--gold);
    font-weight:bold;
    font-size:15px;
  }
  .q__title{
    font-size:17px;
    font-weight:bold;
    color:var(--navy);
    margin:0 0 4px;
  }
  .q__hint{
    margin:2px 0 16px 26px;
    font-size:13px;
    color:var(--muted);
  }
  .options{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-left:26px;
  }
  /* Auswahl-Zeile (Radio + Checkbox gleich gestylt) */
  .opt{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    cursor:pointer;
    transition:border-color .12s ease, background-color .12s ease;
  }
  .opt:hover{border-color:var(--magenta-border);}
  .opt input{
    position:absolute;
    opacity:0;
    width:1px;height:1px;
  }
  .mark{
    flex:0 0 auto;
    width:20px;height:20px;
    border:2px solid #B9C0C9;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    transition:border-color .12s ease, background-color .12s ease;
  }
  .opt--radio .mark{border-radius:50%;}
  .opt--check .mark{border-radius:5px;}
  .mark svg{width:12px;height:12px;opacity:0;transform:scale(.6);transition:opacity .12s ease, transform .12s ease;}
  .opt input:checked ~ .mark{border-color:var(--magenta);background:var(--magenta);}
  .opt input:checked ~ .mark svg{opacity:1;transform:scale(1);}
  .opt input:checked ~ .label{color:var(--navy);font-weight:bold;}
  .opt:has(input:checked){background:var(--magenta-tint);border-color:var(--magenta);}
  .label{font-size:15px;color:var(--ink);}
  .opt input:focus-visible ~ .mark{outline:3px solid var(--focus);outline-offset:2px;}

  /* Bedingte Nachfrage unter Frage 1 */
  .followup{
    display:none;
    margin:16px 0 0 26px;
    padding:18px;
    background:#FAFBFC;
    border:1px solid var(--line);
    border-radius:8px;
  }
  .followup.show{display:block;}
  .followup__title{
    font-size:14px;
    font-weight:bold;
    color:var(--navy);
    margin:0 0 12px;
  }
  .followup .options{margin-left:0;}

  /* Textfelder */
  .field{margin-left:26px;}
  input[type=text],textarea{
    width:100%;
    font-family:inherit;
    font-size:15px;
    color:var(--ink);
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px 14px;
    resize:vertical;
  }
  input[type=text]::placeholder,textarea::placeholder{color:#9AA3AD;}
  input[type=text]:focus,textarea:focus{
    outline:3px solid var(--focus);
    outline-offset:1px;
    border-color:var(--gold);
  }
  textarea{min-height:140px;line-height:1.55;}

  .optional{
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid var(--line);
  }
  .optional label{
    display:block;
    font-size:14px;
    font-weight:bold;
    color:var(--navy);
    margin-bottom:8px;
  }
  .optional .sub{font-weight:normal;color:var(--muted);}

  .error{
    display:none;
    margin:20px 0 0;
    padding:12px 14px;
    background:var(--magenta-tint);
    border:1px solid var(--magenta-border);
    border-radius:8px;
    color:var(--magenta);
    font-size:14px;
  }
  .error.show{display:block;}

  .actions{margin-top:28px;}
  button{
    font-family:inherit;
    font-size:16px;
    font-weight:bold;
    color:#fff;
    background:var(--magenta);
    border:none;
    border-radius:8px;
    padding:15px 28px;
    cursor:pointer;
    transition:background-color .12s ease;
  }
  button:hover{background:#8d1140;}
  button:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
  .foot{
    margin-top:16px;
    font-size:12px;
    color:var(--muted);
  }

  /* Danke-Zustand */
  .thanks{display:none;padding:56px 32px;text-align:center;}
  .thanks.show{display:block;}
  .thanks .ring{
    width:64px;height:64px;border-radius:50%;
    background:var(--magenta-tint);
    border:2px solid var(--magenta);
    margin:0 auto 20px;
    display:flex;align-items:center;justify-content:center;
  }
  .thanks h2{color:var(--navy);margin:0 0 10px;font-size:22px;}
  .thanks p{color:var(--muted);margin:0 auto;max-width:44ch;font-size:15px;}

  @media (max-width:540px){
    .wrap{padding:16px 12px 48px;}
    .card__head{padding:26px 20px 22px;}
    form{padding:4px 20px 24px;}
    h1{font-size:24px;}
    .q__hint,.options,.field,.followup{margin-left:0;}
    .q__num{min-width:0;margin-right:6px;}
  }
  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;}
  }

  /* ----------------------------------------------------------------
     Ergänzt für den Betrieb (docs/PLAN_UMFRAGE_POTENZIALCHECK.md):
     die zwei style-Attribute der Vorlage als Klassen, Feld für
     Roboter, gesperrter Knopf beim Senden, Links unten,
     Datenschutzseite
     ---------------------------------------------------------------- */
  .field--nachfrage{margin-left:0;margin-top:10px;}
  .field--sonstiges{margin-top:12px;}
  .honig{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
  button:disabled{opacity:.6;cursor:wait;}
  .rechtliches{margin:18px 0 0;text-align:center;font-size:12px;color:var(--muted);}
  .rechtliches a{color:var(--muted);}
  .text{padding:8px 32px 32px;}
  .text h2{font-size:17px;line-height:1.3;color:var(--navy);margin:26px 0 8px;}
  .text p{margin:0 0 12px;font-size:15px;}
  .text a{color:var(--magenta);}
  @media (max-width:540px){
    .text{padding:4px 20px 24px;}
  }