/* Kreativ-Prompt-Generator · Jenny Habermehl · ki-und-design.de */
/* ===== Kreativ-Prompt-Generator (Präfix kpb-) ===== */
  #kpb.kpb{--kpb-ink:#111;--kpb-orange:#FA762B;--kpb-orange-dark:#E8651C;--kpb-grey:#f2f2f2;--kpb-line:#dedede;--kpb-muted:#555;
    --kpb-h:780px;height:var(--kpb-h);overflow-y:auto;
    width:100%;max-width:100%;margin:0;background:var(--kpb-grey);border-radius:28px;padding:40px 40px 40px;
    box-sizing:border-box;color:var(--kpb-ink);font-family:Inter,Arial,sans-serif;line-height:1.5}
  #kpb *{box-sizing:border-box}

  /* Kopfzeile */
  #kpb .kpb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;min-height:28px}
  #kpb .kpb-link{all:unset;cursor:pointer;font-size:16px;color:var(--kpb-ink);display:inline-flex;align-items:center;gap:10px}
  #kpb .kpb-link:hover{color:var(--kpb-orange)}
  #kpb .kpb-count{font-size:15px;color:var(--kpb-muted)}
  #kpb .kpb-bar{height:8px;background:var(--kpb-line);border-radius:8px;overflow:hidden;margin-bottom:28px}
  #kpb .kpb-bar span{display:block;height:100%;background:var(--kpb-orange);border-radius:8px;transition:width .3s}

  /* Typo */
  #kpb .kpb-eyebrow{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--kpb-orange);margin:0 0 18px}
  #kpb .kpb-title{font-family:"Playfair Display",Georgia,serif;font-size:52px;line-height:1.05;margin:0 0 24px;font-weight:700}
  #kpb h2{font-family:"Playfair Display",Georgia,serif;font-size:32px;line-height:1.2;margin:0 0 22px;font-weight:700}
    #kpb p{margin:0 0 16px;font-size:16px;line-height:1.5}
  #kpb .kpb-muted{color:var(--kpb-muted)}
  #kpb .kpb-note{font-size:14px;color:var(--kpb-muted);margin:-8px 0 18px}

  /* Startschritte */
  #kpb .kpb-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
  #kpb .kpb-steps li{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:12px 16px;font-size:16px;line-height:1.4}
  #kpb .kpb-steps span{flex:0 0 30px;height:30px;border-radius:50%;background:var(--kpb-orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px}

  /* Antwortkarten */
  #kpb .kpb-opts{display:grid;gap:14px}
  #kpb .kpb-opts.two{grid-template-columns:1fr 1fr}
  #kpb .kpb-opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:18px;background:#fff;
    border:2px solid transparent;border-radius:20px;padding:18px 22px;font-size:17px;transition:border-color .15s}
  #kpb .kpb-opt:hover,#kpb .kpb-opt:focus-visible{border-color:var(--kpb-line)}
  #kpb .kpb-opt .kpb-radio{flex:0 0 26px;height:26px;border:2px solid #9a9a9a;border-radius:50%;position:relative}
  #kpb .kpb-opt.sel{border-color:var(--kpb-orange)}
  #kpb .kpb-opt.sel .kpb-radio{border-color:var(--kpb-orange)}
  #kpb .kpb-opt.sel .kpb-radio::after{content:"";position:absolute;inset:5px;background:var(--kpb-orange);border-radius:50%}
  #kpb .kpb-opt small{display:block;color:var(--kpb-muted);font-size:14px;margin-top:2px}
  #kpb .kpb-opt.surprise{background:#fff8f3}

  /* Buttons */
  #kpb .kpb-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:16px;background:var(--kpb-orange);
    color:#fff;border-radius:99px;padding:16px 32px;font-size:18px;font-weight:500;line-height:1.2;transition:background-color .15s;text-decoration:none;white-space:nowrap;box-shadow:none;opacity:1;-webkit-font-smoothing:antialiased}
  #kpb .kpb-btn:hover{background:var(--kpb-orange-dark)}
  #kpb .kpb-btn.small{padding:11px 22px;font-size:15px;gap:10px}
  #kpb .kpb-row{display:flex;gap:10px;flex-wrap:nowrap}

  /* Ergebnis */
  #kpb .kpb-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
  #kpb .kpb-tag{background:var(--kpb-ink);color:#fff;font-size:12px;padding:5px 11px;border-radius:99px}
  #kpb .kpb-hint{font-size:15px;color:var(--kpb-muted);margin:0 0 14px;line-height:1.45}
  #kpb textarea{display:block;width:100%;height:140px;border:none;border-radius:20px;padding:14px 18px;
    font:14px/1.6 Inter,Arial,sans-serif;color:var(--kpb-ink);background:#fff;resize:none;margin:0 0 12px}
  #kpb .kpb-offer{margin-top:16px;padding-top:14px;border-top:1px solid var(--kpb-line)}
  #kpb .kpb-offer h3{font-family:"Playfair Display",Georgia,serif;font-size:20px;line-height:1.25;margin:0 0 4px}
  #kpb .kpb-offer p{font-size:15px!important;margin:0 0 10px!important;line-height:1.45!important;color:var(--kpb-ink)}
  #kpb .kpb-offer .kpb-btn{margin:2px 0 4px}
  #kpb .kpb-offer p.kpb-small{margin:12px 0 0!important;color:var(--kpb-muted)}
  #kpb .kpb-offer strong{font-weight:600}
  #kpb .kpb-offer a:not(.kpb-btn){color:var(--kpb-orange);font-weight:600;font-style:normal}

  @media(max-width:560px){
    #kpb.kpb{padding:26px 20px 28px;border-radius:22px;height:auto;min-height:0}
    #kpb .kpb-head{margin-bottom:14px}#kpb .kpb-bar{margin-bottom:22px}
    #kpb .kpb-opts{gap:10px}
    #kpb .kpb-opt{padding:13px 16px;font-size:16px;gap:12px;border-radius:16px}#kpb .kpb-opt .kpb-radio{flex-basis:22px;height:22px}
    #kpb .kpb-opt small{font-size:14px}
    #kpb .kpb-btn{padding:14px 26px;font-size:16px}
    #kpb .kpb-btn.small{padding:10px 18px;font-size:15px}
    #kpb .kpb-steps{margin-top:18px;gap:8px}#kpb .kpb-steps li{padding:10px 14px;font-size:15px}
  }

  /* Schutz gegen Theme-Vorgaben */
  #kpb h1,#kpb h2,#kpb h3,#kpb p,#kpb ol,#kpb li{text-transform:none!important;letter-spacing:normal;word-break:normal!important;overflow-wrap:normal!important;hyphens:manual!important;text-align:left!important;color:inherit}
  #kpb h1,#kpb h2,#kpb h3{font-family:"Playfair Display",Georgia,serif!important;font-weight:700!important;color:var(--kpb-ink)!important;padding:0!important}
  #kpb .kpb-title{font-size:48px!important;line-height:1.05!important;margin:0 0 22px!important}
  #kpb h2{font-size:30px!important;line-height:1.2!important;margin:0 0 22px!important}
  #kpb h3{font-size:20px!important;line-height:1.25!important;margin:0 0 4px!important}
  #kpb .kpb-eyebrow{letter-spacing:.16em!important;text-transform:uppercase!important}
  #kpb p,#kpb li,#kpb .kpb-opt,#kpb .kpb-btn,#kpb textarea{font-family:Inter,Arial,sans-serif!important}
  #kpb .kpb-btn{color:#fff!important;text-decoration:none!important}
  #kpb ol{margin-left:0!important;padding-left:0!important}
  @media(max-width:560px){
    #kpb .kpb-title{font-size:32px!important;margin:0 0 16px!important}
    #kpb h2{font-size:24px!important;margin:0 0 18px!important}
  }
  #kpb p,#kpb li,#kpb small,#kpb .kpb-opt{line-height:1.45!important}
  #kpb .kpb-title{line-height:1.08!important}
  #kpb .kpb-eyebrow{margin:0 0 12px!important;line-height:1.3!important}