/* ========================================================================
   SVG Landingpage – Styles (v2)
   Verbesserungen: Header-Layout, Abschnitts-Abwechslung, Vollbreiten-Hintergründe
   ===================================================================== */

/* ------------------------------
   0) Design-Variablen
---------------------------------*/
:root{
  --svg-yellow:#F4D011;
  --svg-green:#009E3E;

  --ink:rgba(0,0,0,.86);
  --muted:rgba(0,0,0,.64);
  --subtle:rgba(0,0,0,.06);

  --bg:#ffffff;
  --bg-alt:#f7faf7;
  --panel:#ffffff;

  --radius:12px;
  --radius-sm:8px;

  --shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --shadow:0 8px 24px rgba(0,0,0,.12);

  --success:#009E3E;
  --warn:#F4D011;
  --error:#c62828;

  --maxw: 1080px;
  --section-pad-y: 2.2rem;

  /* Typographie */
  --font-main:"News Cycle", Arial, sans-serif;
  --fs-100: clamp(.95rem, .32vw + .9rem, 1.05rem); /* Body */
  --fs-200: clamp(1.1rem, .45vw + 1rem, 1.25rem);   /* h3, lead */
  --fs-300: clamp(1.25rem, .7vw + 1.1rem, 1.6rem);  /* h2 */
  --fs-400: clamp(1.4rem, 1vw + 1.2rem, 2.0rem);    /* hero title */
}

/* ------------------------------
   1) Base / Reset
---------------------------------*/
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0s !important; transition-duration:0s !important; }
}

body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font:400 var(--fs-100)/1.55 var(--font-main);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
svg{ display:block; }

a{ color:inherit; }
a:hover{ text-decoration:none; }

.nowrap{ white-space:nowrap; }

.muted{ color:var(--muted); }

.skip-link{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; z-index:10000;
  background:#000; color:#fff; padding:.6rem .8rem; border-radius:8px;
}

/* Breiten-Container */
.section, main, footer{ max-width:var(--maxw); margin:0 auto; padding:0 1rem; }

/* Externe Links */
a.ext{
  border-bottom:1px dotted currentColor;
  text-decoration:none;
}
a.ext::after{
  content:"↗";
  font-size:.9em;
  margin-left:.2em;
  opacity:.7;
}

/* ------------------------------
   2) Header – präzise Zentrierung
---------------------------------*/
.svg-header{
  --logo-w: 56px;
  position:relative;
  display:grid;
  grid-template-columns: auto 1fr auto; /* links Logo, Mitte Titel, rechts „Spiegel“ */
  align-items:center;
  gap:1rem;
  padding:.75rem clamp(1rem, 3vw, 1.25rem);
  background:#fff;
  border-bottom:4px solid var(--svg-yellow);
}
.svg-header.inverted{
  background:var(--svg-yellow);
  border-bottom:none;
  box-shadow:var(--shadow-sm);
}
.svg-header .brand{ display:flex; align-items:center; }
.svg-header .logo{ width:var(--logo-w); height:auto; flex:0 0 auto; }

/* rechter „Spiegel“, damit der Titel wirklich mittig ist */
.svg-header::after{
  content:"";
  width:var(--logo-w);
  height:1px; /* unsichtbarer Platzhalter */
  justify-self:end;
}

.svg-header h1{
  margin:0;
  font-weight:700;
  text-align:center;
  color:#fff;
  font-size:clamp(1.05rem, .55vw + 1rem, 1.35rem);
  letter-spacing:.2px;
  line-height:1.25;
}
@media (max-width:780px){
  .svg-header{
    grid-template-columns: auto 1fr auto;
    row-gap:.35rem;
    text-align:center;
  }
}

/* Optional: sticky Header (auskommentieren, wenn nicht gewünscht) */
/*
.svg-header{ position:sticky; top:0; z-index:50; }
*/

/* ------------------------------
   3) Buttons
---------------------------------*/
.btn{
  --btn-pad-y:.8rem;
  --btn-pad-x:1.1rem;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--radius);
  border:1px solid transparent;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  transition:transform .04s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  user-select:none;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--svg-yellow);
  color:#000;
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{ background:#ffd83b; }
.btn-primary:focus-visible{ outline:3px solid #000; outline-offset:2px; }

.btn-secondary{
  background:#fff;
  color:#000;
  border-color:#00000020;
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{ background:#f6f6f6; }

.btn-ghost{
  background:transparent;
  border-color:#00000030;
}
.btn-ghost:hover{ background:#00000006; }

.btn-link{
  padding:.2rem .3rem;
  border-radius:6px;
  text-decoration:underline;
}

/* ------------------------------
   4) Hero
---------------------------------*/
.hero{ position:relative; }
.hero-img{ width:100%; height:auto; display:block; object-fit:cover; }

.hero-overlay{
  position:absolute;
  left:max(16px, 2.2vw);
  top:max(16px, 2.2vw);
  width:min(92%, 560px);
  color:#fff;
  background:rgba(0,0,0,.55);
  backdrop-filter:saturate(140%) blur(1px);
  border-radius:14px;
  padding:.9rem 1rem 1.05rem;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
}
.hero-kicker{
  margin:0 0 .2rem;
  font-weight:700;
  letter-spacing:.02em;
  font-size:clamp(.9rem, .45vw + .8rem, 1rem);
}
.hero-title{
  margin:.05rem 0;
  font-weight:700;
  line-height:1.2;
  font-size:var(--fs-400);
}
.hero-sub{ margin:.2rem 0 .5rem; font-size:clamp(1rem, .3vw + .95rem, 1.1rem); }

.hero-benefits{
  list-style:none; padding:0; margin:.2rem 0 .9rem;
}
.hero-benefits li{
  display:flex; align-items:center; gap:.5rem;
  margin:.28rem 0;
}
.hero-benefits li::before{
  content:"✓";
  font-weight:700;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  width:1.25rem; height:1.25rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

.hero-ctas{ display:flex; flex-wrap:wrap; gap:.6rem; margin:.5rem 0 .3rem; }
.hero-tagline{ margin:.4rem 0 0; opacity:.95; font-size:.95rem; }

.trust-strip{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.35) 60%);
  color:#fff;
  padding: .8rem clamp(1rem, 3vw, 1.25rem);
}
.trust-list{
  list-style:none; padding:0; margin:0;
  display:flex; gap:1rem; flex-wrap:wrap;
  font-weight:700;
  letter-spacing:.02em;
}

/* ------------------------------
   5) Sections & Typo
---------------------------------*/
.section{ 
  position:relative;
  margin:var(--section-pad-y) auto;
}
.section h2{
  margin:0 0 .8rem;
  color:var(--svg-green);
  font-size:var(--fs-300);
}
.section h2::after{
  content:"";
  display:block;
  width:56px; height:4px;
  background:var(--svg-yellow);
  border-radius:2px;
  margin-top:.35rem;
}
.section h3{
  margin: .4rem 0 .35rem;
  font-size:var(--fs-200);
}
.section-intro{
  margin:-.2rem 0 1rem;
  color:var(--muted);
}

/* Vollbreiten-Hintergründe für Abwechslung (ohne HTML-Änderung) */
.section.quickcheck::before,
.section.benefits::before,
.section.team::before,
.section.details::before,
.section.cta::before,
.section.leadmagnet::before{
  content:"";
  position:absolute; z-index:-1;
  left:50%; transform:translateX(-50%);
  width:100vw;
  top:calc(var(--section-pad-y) * -0.6);
  bottom:calc(var(--section-pad-y) * -0.6);
}

/* individuelle Hintergründe je Bereich */
.section.quickcheck::before{
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 60%, #f7faf7 100%);
}
.section.benefits::before{
  background:#fbfbfd;
}
.section.team::before{
  background: linear-gradient(180deg, #fff 0%, #fff8e0 100%);
}
.section.details::before{
  background:#f5fbf7;
}
.section.cta::before{
  background: radial-gradient(1200px 400px at 50% -100px, #fff3c2 0%, #fff 65%);
}
.section.leadmagnet::before{
  background:#f5f8ff;
}

/* ------------------------------
   6) Quick-Check
---------------------------------*/
.quickcheck form{
  background:var(--panel);
  border:1px solid #e9e9e9;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow-sm);
}

.quickcheck fieldset{
  margin:0 0 1rem;
  border:0;
  padding:0;
}
.quickcheck legend{
  font-weight:700;
  color:#222;
  margin-bottom:.45rem;
}

.options{
  display:flex; flex-wrap:wrap; gap:.5rem;
}

.options label{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  padding:.6rem .8rem;
  border:1px solid #d8d8d8;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  user-select:none;
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.options label:hover{ box-shadow:var(--shadow-sm); }
.options input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none; /* visual hide */
}
.options label:has(input:checked){
  border-color:#bdbdbd;
  background:#f7f7f7;
  box-shadow:inset 0 0 0 2px #ececec;
}

.qc-actions{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  margin:.6rem 0 .4rem;
}

.qc-result{
  display:flex; align-items:flex-start; gap:.8rem;
  margin-top:.6rem;
  background:#f9faf9;
  border-left:4px solid var(--svg-green);
  padding:.7rem .9rem;
  border-radius:0 10px 10px 0;
}
.qc-badge{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  background:#eaeaea;
  color:#333;
}
.qc-badge[data-level="pending"]{ background:#eaeaea; color:#333; }
.qc-badge[data-level="green"]{ background: #e6f5ec; color: var(--success); box-shadow: inset 0 0 0 2px #bfe6cf; }
.qc-badge[data-level="yellow"]{ background: #fff8da; color: #916e00; box-shadow: inset 0 0 0 2px #ffe585; }
.qc-badge[data-level="red"]{ background: #fde7e7; color: #b00020; box-shadow: inset 0 0 0 2px #f6bcbc; }

.qc-text p{ margin:.25rem 0 0; }

/* ------------------------------
   7) Nutzen-Kacheln
---------------------------------*/
.cards{
  list-style:none; padding:0; margin:0;
  display:grid; gap:1rem;
  grid-template-columns: repeat(4, 1fr);
}
.card{
  background:var(--panel);
  border:1px solid #eaeaea;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow-sm);
}
.card p{ margin:.3rem 0 0; color:#333; }
@media (max-width:1024px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:600px){ .cards{ grid-template-columns: 1fr; } }

/* ------------------------------
   8) Team / Social Proof
---------------------------------*/
.team-figure{
  margin:0; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm);
  border:1px solid #eaeaea;
}
.team-figure img{ width:100%; display:block; object-fit:cover; }
.team-figure figcaption{
  padding:.6rem .8rem; background:#fff; color:var(--muted);
  border-top:1px solid #eee;
}
.team-cta{ margin-top:.8rem; }

/* ------------------------------
   9) Details / Akkordeon
---------------------------------*/
.details details{
  border:1px solid #e8e8e8;
  border-radius: var(--radius);
  background:#fff;
  margin:.7rem 0;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.details summary{
  list-style:none; cursor:pointer;
  padding:.85rem 1rem;
  font-weight:700;
  position:relative;
  outline:none;
}
.details summary::-webkit-details-marker{ display:none; }

.details summary::after{
  content:"▾";
  position:absolute; right:1rem; top:50%; transform:translateY(-50%) rotate(0deg);
  transition: transform .18s ease;
  opacity:.8;
}
.details details[open] > summary::after{ transform:translateY(-50%) rotate(-180deg); }

.details .panel{
  padding:.2rem 1rem 1rem;
  border-top:1px solid #efefef;
}
.details .panel .note{
  background:#f6faf6;
  border-left:4px solid var(--svg-green);
  padding:.55rem .8rem;
  border-radius:0 10px 10px 0;
}

/* ------------------------------
   10) CTA / Countdown
---------------------------------*/
.cta{
  background:linear-gradient(180deg, #fff, #fff 40%, #fdfbf0);
  border:1px solid #f1f1f1;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.1rem;
}
.cta-benefits{
  list-style:disc inside; margin:.2rem 0 .8rem; line-height:1.5;
}
.countdown{
  display:flex; align-items:center; gap:.4rem;
  margin:.25rem 0 .9rem;
  font-weight:700;
}
#days-left{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:3.2ch; padding:.25rem .45rem;
  border-radius:8px;
  background:#fff;
  border:1px solid #e6e6e6;
  box-shadow:var(--shadow-sm);
}

/* ------------------------------
   11) Formular
---------------------------------*/
.form-section h2{ margin-bottom:.25rem; }
.progress-hint{ margin:.2rem 0 .6rem; color:var(--muted); }

form{
  background:var(--panel);
  border:1px solid #e9e9e9;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow-sm);
}

fieldset{
  margin:0 0 1.2rem;
  border:1px solid #efefef;
  border-radius:var(--radius-sm);
  padding:1rem;
}

legend{
  font-weight:700; color:var(--svg-green);
  padding:0 .4rem;
  font-size:calc(var(--fs-100) + .05rem);
}

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

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select{
  width:100%;
  padding:.65rem .8rem;
  border:1px solid #d3d3d3;
  border-radius:10px;
  background:#fff;
  font:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input:focus, select:focus{
  outline:none;
  border-color:#e9c800;
  box-shadow:0 0 0 3px rgba(244,208,17,.25);
}

input[type="checkbox"]{ accent-color:var(--svg-green); }
.option{ display:flex; align-items:flex-start; gap:.6rem; }

.hint{ font-size:.95rem; color:var(--muted); text-align:center; margin-top:.4rem; }

/* Invalid-Feedback (JS ergänzt was-submitted) */
input:invalid, select:invalid{ background:#fffdf0; }
form.was-submitted input:invalid,
form.was-submitted select:invalid{
  border-color:#f0a400;
  box-shadow:0 0 0 3px rgba(244,208,17,.2);
}

/* Button unter Formular */
#cta-submit{
  display:block;
  width:100%;
  margin:.3rem 0 .5rem;
}

/* ------------------------------
   12) Lead-Magnet
---------------------------------*/
.leadmagnet{
  background:#f9fafc;
  border:1px solid #eceff3;
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:var(--shadow-sm);
}

/* ------------------------------
   13) Footer
---------------------------------*/
.footer{
  text-align:center;
  padding:1.2rem 1rem 2rem;
  color:var(--muted);
}
.footer .claim{
  font-weight:700; letter-spacing:.02em; margin:.2rem 0;
}
.footer .fineprint{
  margin:.3rem auto 0; max-width:var(--maxw);
}

/* ------------------------------
   14) Sticky Mobile Bar – sanftes Ein-/Ausblenden
---------------------------------*/
.sticky-bar{
  position:fixed; left:0; right:0; bottom:0;
  display:flex;
  gap:.6rem;
  padding:.6rem .8rem;
  background:rgba(255,255,255,.94);
  backdrop-filter: blur(4px);
  border-top:1px solid #e9e9e9;
  box-shadow:0 -6px 20px rgba(0,0,0,.08);
  z-index:999;

  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.sticky-bar .btn{ flex:1 1 0; }
.sticky-bar.visible{ opacity:1; transform:translateY(0); pointer-events:auto; }

@supports (padding: max(0px)) {
  .sticky-bar{ padding-bottom: max(.6rem, env(safe-area-inset-bottom)); }
}

@media (min-width: 861px){
  .sticky-bar{ display:none; }
}

/* ------------------------------
   15) Responsive Tweaks
---------------------------------*/
@media (max-width: 1100px){
  .hero-overlay{ width:min(92%, 540px); }
}
@media (max-width: 640px){
  .hero-overlay{ width: calc(100% - 24px); left:12px; right:12px; }
  .hero-ctas .btn{ flex:1 1 auto; }
  .trust-list{ justify-content:center; }
}

/* ------------------------------
   16) Focus Visibility (A11y)
---------------------------------*/
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible{
  outline:3px solid var(--svg-green);
  outline-offset:2px;
  border-radius:8px;
}

/* ------------------------------
   17) Utility Badges / Notes
---------------------------------*/
.note{
  background:#f6faf6;
  border-left:4px solid var(--svg-green);
  padding:.6rem .85rem;
  border-radius:0 10px 10px 0;
}

/* ------------------------------
   18) Print (kompakt)
---------------------------------*/
@media print{
  .hero, .trust-strip, .sticky-bar{ display:none !important; }
  a::after{ content:" (" attr(href) ")"; font-size:.9em; }
  .btn{ border:1px solid #000; background:none !important; }
}