/* ============================================================
   FLZ Newsletter-Anmelde-Banner – Styles
   Global im vhost einbinden:
   <link rel="stylesheet" href="https://www.flz.de/static/flz-newsletter-banner.css">
   ============================================================ */

/* alles unter .flz-nl gescoped, damit nichts mit Bootstrap/pscp kollidiert */
.flz-nl{
  --flz-nl-bg:    #e3edf4;
  --flz-nl-blue:  #005da8;
  --flz-nl-text:  #000;
  --flz-nl-line:  #c5d2e5;
  --flz-nl-gray:  #7a828e;
  --flz-nl-req:   #d0021b;

  box-sizing:border-box;
  max-width:840px;
  margin:24px auto;            /* zentriert */
  padding:14px 16px 14px;
  border-radius:12px;
  background:var(--flz-nl-bg);
  font-family:sans-serif;
  color:var(--flz-nl-text);

  display:grid;
  grid-template-columns:60px 1fr;   /* Logo-Spalte | Inhalt */
  column-gap:16px;
  align-items:start;
}
.flz-nl--noicon{grid-template-columns:1fr;}   /* ohne Logo: volle Breite */
.flz-nl *,.flz-nl *::before,.flz-nl *::after{box-sizing:border-box;}
.flz-nl + .flz-nl{margin-top:24px;}

.flz-nl__icon{width:60px;height:60px;object-fit:contain;}
.flz-nl__body{min-width:0;}   /* Inhalt inkl. Formular – linke Spalte bleibt frei */
.flz-nl__title{margin:0 0 4px;font:600 18px/1.2 sans-serif;color:var(--flz-nl-blue);}
.flz-nl__desc{margin:0 0 2px;font:400 15px/1.25 sans-serif;color:var(--flz-nl-text);}
.flz-nl__freq{margin:0;font:400 13px/1.4 sans-serif;color:var(--flz-nl-gray);}

.flz-nl__form{margin-top:14px;}
.flz-nl__label{display:block;margin-bottom:7px;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;color:#4b5563;}
.flz-nl__req{color:var(--flz-nl-req);}

/* Input + Button nebeneinander */
.flz-nl__row{display:flex;gap:10px;align-items:stretch;}
.flz-nl__input{
  flex:1 1 auto;min-width:0;
  padding:12px 14px;
  font-family:Arial,Helvetica,sans-serif;font-size:12px;
  background:#fff;border:1px solid var(--flz-nl-line);border-radius:8px;
  outline:none;transition:border-color .15s;
}
.flz-nl__input:focus{border-color:var(--flz-nl-blue);}

.flz-nl__btn{
  flex:0 0 auto;
  padding:10px 26px;
  font-family:Arial,Helvetica,sans-serif;font-size:12px;white-space:nowrap;
  color:var(--flz-nl-blue);background:#fff;
  border:1px solid var(--flz-nl-blue);border-radius:8px;
  cursor:pointer;transition:background .15s,color .15s,opacity .15s;
}
.flz-nl__btn:hover:not(:disabled){background:var(--flz-nl-blue);color:#fff;}
.flz-nl__btn:disabled{opacity:.45;cursor:not-allowed;}

/* Auswahl (Multi) – nebeneinander im Grid */
.flz-nl__choices{border:0;margin:0 0 16px;padding:0;}
.flz-nl__choices legend{padding:0;margin-bottom:10px;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;color:#4b5563;}
.flz-nl__choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.flz-nl__choice{
  display:flex;gap:12px;align-items:flex-start;min-width:0;
  padding:8px 10px;
  background:#fff;border:1px solid var(--flz-nl-line);border-radius:8px;
  font-family:Arial,Helvetica,sans-serif;cursor:pointer;
}
.flz-nl__choice input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--flz-nl-blue);cursor:pointer;}
.flz-nl__choice-body{min-width:0;}
.flz-nl__choice-title{display:block;font-size:15px;font-weight:700;color:#1f2937;}
.flz-nl__t1,.flz-nl__t2{display:block;overflow-wrap:anywhere;}
.flz-nl__choice-sub{display:block;font-size:13px;color:var(--flz-nl-gray);margin-top:2px;}

.flz-nl__msg{margin:14px 0 0;font-family:Arial,Helvetica,sans-serif;font-size:14px;display:none;}
.flz-nl__msg.is-ok{display:block;color:#1a7a3c;}
.flz-nl__msg.is-err{display:block;color:var(--flz-nl-req);}

@media (max-width:520px){
  .flz-nl{padding:20px 18px 22px;grid-template-columns:1fr;}   /* gestapelt */
  .flz-nl__icon{margin-bottom:12px;}
  .flz-nl__row{flex-direction:column;}                          /* Feld über Button */
  .flz-nl__btn{width:100%;}
  .flz-nl__choice-grid{grid-template-columns:1fr;}              /* Auswahl einspaltig */
}
@media (prefers-reduced-motion:reduce){
  .flz-nl__input,.flz-nl__btn{transition:none;}
}