/* ------------------------------------------------------------------
   1) Design-Variablen (SVG-Styleguide)
------------------------------------------------------------------*/
:root{
  --svg-yellow:#FFD100;
  --svg-orange:#FFA400;
  --svg-grey65:rgba(0,0,0,.65);
  --radius:6px;
  --shadow:0 2px 4px rgba(0,0,0,.08);
  --error:#c62828;
  --font-main:"News Cycle",Arial,sans-serif;
}

/* ------------------------------------------------------------------
   2) Grundlayout & Typografie
------------------------------------------------------------------*/
*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font:400 1.5rem/1.45 var(--font-main);
  color:var(--svg-grey65);
  background:#fff;
}

/* ------------------------------------------------------------------
   3) Header
------------------------------------------------------------------*/
header{
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
  padding: 0rem 0rem;
  border-bottom:8px solid var(--svg-yellow);
}
.svg-header.inverted h1{color:#fff}
#Banner{
  width: 100%;
}
header .logo{flex:0 0 auto;width:48px;height:auto}
header h1{
  position:absolute;
  left:50%;transform:translateX(-50%);
  margin:0;font-size:1.35rem;font-weight:700;text-align:center;
  white-space:nowrap;
}

/* Mobile-Header-Stack */
@media(max-width:1023px){
  header{flex-direction:column;text-align:center}
  header h1{padding-bottom:.4rem}
}

/* ------------------------------------------------------------------
   4) Lead-Absatz
------------------------------------------------------------------*/
.lead-wrap{
  text-align:center;
  margin: 2rem
}
.lead{
  margin: auto;
  max-width:840px;
}

/* ------------------------------------------------------------------
   5) Formular-Layout
------------------------------------------------------------------*/
form {
  /* Schriftgröße im Formular leicht anheben (von 1rem auf 1.125rem = 18px) */
  font-size: 1.25rem;
}
main{max-width:720px;margin: 1rem auto;padding:0 1rem}
fieldset{
  margin:0 0 2rem 0;
  padding:1.5rem 1.25rem;
  border:1px solid #e0e0e0;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
legend{
  font-weight:800;
  color:var(--svg-grey65);
  padding: 0.5rem;
}

label{display:block;margin-bottom:0.5rem}
label.required::after{content:" *";color:var(--svg-yellow)}

input[type="text"],
input[type="email"]{
  width:100%;
  padding:.65rem .8rem;
  border:1px solid #ccc;
  border-radius:var(--radius);
  font:inherit;
}
input:focus{outline:2px solid var(--svg-yellow)}

input[type="radio"]{accent-color:var(--svg-yellow);margin-top:.25rem}
.option{display:flex;align-items:flex-start;gap:.8rem;margin-bottom:.5rem}

button[type="submit"]{
  display:block;
  margin:0 auto 1.5rem;
  padding:.8rem 2rem;
  border:0;
  border-radius:var(--radius);
  background:var(--svg-yellow);
  font-weight:700;
  font-size: 18px;
  color: rgb(63, 56, 56);
  cursor:pointer;
  transition:background .2s ease,box-shadow .2s ease;
}
button:hover{
  background:#ffd93b;
  box-shadow:0 6px 8px rgba(0,0,0,.12);
}
button:focus-visible{
  outline:3px solid var(--svg-yellow);
  outline-offset:2px;
}

small.error{
  display:none;
  font-size:.85rem;
  color:var(--error);
}
/* Fehlermeldungen erst nach Submit */
form.was-submitted input:invalid + small.error,
form.was-submitted .group.invalid{display:block}

/* Hinweis unter CTA */
.hint{
  font: size 15em;
  text-align:center;
  color:var(--svg-grey65);
  margin-top:.5rem;
}

/* ------------------------------------------------------------------
   6) Content-Sections (Benefits / Speaker)
------------------------------------------------------------------*/
.section{
  max-width:900px;
  margin:3rem auto;
  padding:0 1rem;
}
.section h2{
  margin:0 0 1rem;
  color:var(--svg-yellow);
  font: size 3em;
}

/* ----- Benefit-Fragen */
.checklist{
  list-style:disc inside;
  margin:1rem 0 2rem;
  line-height:1.5;
}
.quote{
  font-style:italic;
  font-size: 1.25rem;
  text-align:center;
  margin-top:-.5rem;
}

/* ------------------------------------------------------------------
   7) Speaker-Grid
------------------------------------------------------------------*/
.speakers-list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.25rem;
  padding:0;
  list-style:none;
  margin:1.5rem 0 1rem;
}
@media(max-width:480px){
  .speakers-list{grid-template-columns:1fr}
}

/* Speaker-Card mit Avatar */
.speaker-card{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem;
  border:1px solid #e0e0e0;
  border-radius:var(--radius);
  background:#fafafa;
  box-shadow:var(--shadow);
  font-size:.97rem;
  line-height:1.35;
}
.speaker-card.moderator{
  background:#fff8e1;
}

/* Avatar – rund, 64 × 64 */
.speaker-avatar{
  flex:0 0 64px;
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
}

/* Platzhalter-Avatar (Initialen) */
.speaker-avatar.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#cfd8dc;
  color:#37474f;
  font-weight:700;
  font-size:1.05rem;
}

/* Teilnahme-Hinweis */
.cost-note{
  margin-top:3rem;
  font-weight:700;
  text-align:center;
  color:var(--svg-yellow);
}

/* ------------------------------------------------------------------
   8) Footer
------------------------------------------------------------------*/
footer{
  text-align:center;
  padding:1rem 0 5rem;
  font-size: 1.25rem;
}