/* ==========================================================================
   web-archive.de – style.css  (v=1)
   Light SaaS-Design nach Mockup. Alle Farben als Variablen, Kontrast >= 4.5:1
   ========================================================================== */

:root{
  --primary:        #1d4ed8;   /* Hauptblau (Buttons, Links) */
  --primary-bright: #2563eb;   /* Hover / Akzente */
  --primary-soft:   #eef3fe;   /* heller Blau-Tint fuer Flaechen */
  --black:          #0b1526;   /* Headlines */
  --text:           #243042;   /* Fliesstext (Kontrast 12:1 auf #fff) */
  --muted:          #5a6779;   /* Nebentext (Kontrast 5.6:1 auf #fff) */
  --line:           #e3e8f0;   /* Rahmen */
  --bg:             #ffffff;
  --bg-soft:        #f6f8fc;   /* Sektion-Wechsel */
  --footer-bg:      #0d1b33;   /* dunkler Footer */
  --footer-text:    #c7d3e8;   /* Kontrast 10:1 auf Footer-Bg */
  --footer-muted:   #8fa3c2;   /* Kontrast 5.4:1 auf Footer-Bg */
  --ok:             #15803d;   /* Gruen fuer "keine Risiken" (4.7:1 auf #fff) */
  --ok-soft:        #e9f7ee;
  --warn:           #b45309;
  --bad:            #b91c1c;   /* Rot fuer Treffer (4.5:1 auf #fff) */
  --card-shadow:    0 1px 2px rgba(13,27,51,.05), 0 8px 24px rgba(29,78,216,.07);
  --r:              12px;
  --r-lg:           16px;
  --max-w:          1180px;
  --pad-x:          clamp(1.1rem, 4vw, 2rem);
  --f-display:      'Space Grotesk', system-ui, sans-serif;
  --f-body:         'Inter', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--f-body);
  font-size:1rem;line-height:1.65;
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
/* Links im Fliesstext nicht nur per Farbe erkennbar (Barrierefreiheit) */
main p a, main li a, .col-card a, .faq-a a, .timeline-note a, .report a{
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
:focus-visible{outline:3px solid var(--primary-bright);outline-offset:2px;border-radius:4px}

.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x)}

h1,h2,h3{font-family:var(--f-display);color:var(--black);line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.5vw,3.3rem);font-weight:700}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:700;margin-bottom:1rem}
h3{font-size:1.15rem;font-weight:600;margin-bottom:.5rem}
p{margin-bottom:1rem}
.section{padding:4.5rem 0}
.section-soft{background:var(--bg-soft)}
.lead{font-size:1.12rem;color:var(--muted);max-width:46rem}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:2rem;height:68px;
     max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x)}
.nav-logo{display:flex;align-items:center;gap:.55rem;font-family:var(--f-display);
     font-weight:700;font-size:1.2rem;color:var(--black)}
.nav-logo:hover{text-decoration:none}
.nav-logo .tld{color:var(--primary)}
.nav-logo svg{flex:none}
.nav-logo .logo-img{height:36px;width:auto;display:block}
.nav-menu{display:flex;align-items:center;gap:1.6rem;margin-left:auto}
.nav-link{color:var(--text);font-size:.95rem;font-weight:500}
.nav-link:hover{color:var(--primary);text-decoration:none}
.nav-link.active{color:var(--primary);font-weight:600}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-display);font-weight:600;font-size:.97rem;
  background:var(--primary);color:#fff;border:0;cursor:pointer;
  padding:.72rem 1.4rem;border-radius:10px;
  transition:background .2s ease, transform .15s ease;
}
.btn:hover{background:var(--primary-bright);text-decoration:none;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--primary);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--primary-soft);color:var(--primary)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:.5rem;margin-left:auto}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--black);margin:5px 0;border-radius:2px}

/* --------------------------------------------------------------------------
   Hero + Abfrage-Karte
   -------------------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;padding:4.2rem 0 3.4rem;overflow:hidden;
  background:linear-gradient(115deg,#ffffff 40%,#e9f1fe)} /* Fallback, falls hero.webp fehlt */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:right center;z-index:-1;pointer-events:none;opacity:.6}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center}
.hero h1 .accent{color:var(--primary)}
.hero .lead{margin-top:1.1rem;color:var(--text);font-weight:450}
.check-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--card-shadow);padding:1.8rem;
}
.check-card h2{font-size:1.18rem;margin-bottom:1rem}
.check-row{display:flex;gap:.7rem}
.check-row input{
  flex:1;min-width:0;font:1rem var(--f-body);color:var(--black);
  border:1.5px solid var(--line);border-radius:10px;padding:.78rem 1rem;
}
.check-row input:focus{border-color:var(--primary);outline:none}
.check-note{display:flex;align-items:center;gap:.5rem;color:var(--muted);
  font-size:.85rem;margin-top:.9rem}
.check-note svg{flex:none}
.demo-hint{display:none;margin-top:.8rem;font-size:.85rem;color:var(--warn);
  background:#fdf6ec;border:1px solid #f3e3c3;border-radius:8px;padding:.55rem .8rem}
.demo-hint.visible{display:block}
.feature-chips{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.4rem}
.chip{display:flex;align-items:center;gap:.55rem;font-size:.92rem;font-weight:500;color:var(--text)}
.chip svg{flex:none}

/* --------------------------------------------------------------------------
   Beispiel-Analyse
   -------------------------------------------------------------------------- */
.demo-badge{display:inline-block;background:var(--primary-soft);color:var(--primary);
  font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  border-radius:99px;padding:.25rem .8rem;margin-bottom:.8rem}
.result-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.result-head .domain{font-family:var(--f-display);color:var(--primary)}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.8rem 0 2.4rem}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  border-left:5px solid var(--primary);padding:1.05rem 1.15rem;box-shadow:var(--card-shadow)}
.kpi .k-label{font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.kpi .k-value{font-family:var(--f-display);font-size:1.45rem;font-weight:700;
  color:var(--black);margin-top:.2rem}
.kpi .k-value.ok{color:var(--ok)}
.kpi .k-value.warn{color:var(--warn)}
.kpi .k-value.bad{color:var(--bad)}
.kpi .k-sub{font-size:.8rem;color:var(--muted);margin-top:.15rem}

/* Timeline */
.timeline-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--card-shadow);padding:1.8rem;margin-bottom:1.6rem}
.timeline-wrap h3{margin-bottom:1.4rem}
.timeline{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:.8rem}
.timeline::before{content:"";position:absolute;left:2%;right:2%;top:9px;height:2px;
  background:var(--line)}
.t-item{position:relative;padding-top:1.6rem;text-align:center}
.t-item::before{content:"";position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;background:var(--primary);
  border:3px solid #fff;box-shadow:0 0 0 2px var(--primary)}
.t-year{font-family:var(--f-display);font-weight:700;color:var(--black);font-size:.95rem}
.t-card{margin-top:.55rem;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:10px;padding:.6rem .55rem;font-size:.78rem;line-height:1.4;
  min-height:5.6rem;display:flex;flex-direction:column;justify-content:space-between}
.t-title{color:var(--text);display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.t-tag{display:inline-block;margin-top:.45rem;font-size:.7rem;font-weight:600;
  color:var(--ok);background:var(--ok-soft);border-radius:6px;padding:.1rem .45rem;align-self:center}
.t-tag.info{color:var(--primary);background:var(--primary-soft)}
.t-tag.bad{color:var(--bad);background:#fdecea}
.flags{margin:0 0 1.6rem}
.flag-warn{background:#fdf6ec;border:1px solid #f3e3c3;border-radius:8px;color:var(--warn);
  font-size:.9rem;padding:.6rem .9rem;margin-bottom:.5rem}
.t-link{display:block;margin-top:.45rem;font-size:.74rem;font-weight:600}
.timeline-note{font-size:.84rem;color:var(--muted);margin:1.2rem 0 0}

/* Zwei-Spalten: Chart + Risiko */
.result-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:1.6rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--card-shadow);padding:1.8rem}
.panel h3{margin-bottom:1.1rem}
.chart-svg{width:100%;height:auto}
.chart-legend{font-size:.8rem;color:var(--muted);margin-top:.6rem}
.risk-list{list-style:none}
.risk-list li{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.risk-list li:last-child{border-bottom:0}
.risk-name{display:flex;align-items:center;gap:.55rem;font-weight:500;color:var(--text)}
.risk-ok{color:var(--ok);font-size:.85rem;font-weight:600;white-space:nowrap}
.risk-bad{color:var(--bad);font-size:.85rem;font-weight:700;white-space:nowrap}
.risk-muted{color:var(--muted);font-size:.85rem;white-space:nowrap}
.dr-box{margin-top:1.2rem;background:var(--primary-soft);border-radius:10px;
  padding:.9rem 1.1rem;display:flex;align-items:baseline;gap:.6rem}
.dr-box .dr{font-family:var(--f-display);font-size:1.7rem;font-weight:700;color:var(--primary)}
.dr-box .dr-label{font-size:.85rem;color:var(--text)}

/* --------------------------------------------------------------------------
   Textsektionen, Listen, FAQ
   -------------------------------------------------------------------------- */
.prose{}
.prose h2{margin-top:0}
.prose h3{margin-top:1.6rem}
ul.check{list-style:none;margin:0 0 1rem}
ul.check li{padding-left:1.6rem;position:relative;margin-bottom:.45rem}
ul.check li::before{content:"→";position:absolute;left:0;color:var(--primary);font-weight:700}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.col-card{background:#fff;border:1px solid var(--line);border-left:5px solid var(--primary);
  border-radius:var(--r);box-shadow:var(--card-shadow);padding:1.4rem}
.col-card h3{margin-bottom:.45rem}
.col-card p{font-size:.93rem;color:var(--muted);margin:0}
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:#fff;
  margin-bottom:.8rem;overflow:hidden}
.faq-item h3{margin:0}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:0;cursor:pointer;text-align:left;
  font:600 1.02rem var(--f-display);color:var(--black);padding:1.05rem 1.3rem}
.faq-q::after{content:"+";font-size:1.4rem;color:var(--primary);flex:none}
.faq-item.open .faq-q::after{content:"–"}
.faq-a{display:none;padding:0 1.3rem 1.15rem;color:var(--text)}
.faq-item.open .faq-a{display:block}

/* CTA */
.cta-band{background:linear-gradient(135deg,var(--primary),#153aa3);
  border-radius:var(--r-lg);padding:3rem;text-align:center;color:#fff}
.cta-band h2{color:#fff}
.cta-band p{color:#dbe6ff;max-width:38rem;margin:0 auto 1.5rem}
.cta-band .btn{background:#fff;color:var(--primary)}
.cta-band .btn:hover{background:var(--primary-soft)}

/* --------------------------------------------------------------------------
   Footer (Kontrast beachtet: alle Werte >= 4.5:1 auf #0d1b33)
   -------------------------------------------------------------------------- */
.footer{background:var(--footer-bg);color:var(--footer-text);margin-top:4.5rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.2rem;
  padding:3.4rem 0 2.4rem}
.footer .f-head{font-family:var(--f-display);font-weight:700;color:#fff;font-size:.95rem;margin-bottom:.9rem}
.footer ul{list-style:none}
.footer li{margin-bottom:.5rem}
.footer a{color:var(--footer-text);font-size:.92rem}
.footer a:hover{color:#fff}
.footer .f-about{font-size:.92rem;color:var(--footer-muted);margin-top:.7rem;max-width:24rem}
.footer-logo{display:flex;align-items:center;gap:.55rem;font-family:var(--f-display);
  font-weight:700;font-size:1.15rem;color:#fff}
.footer-bottom{border-top:1px solid rgba(199,211,232,.18);padding:1.3rem 0;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.85rem;color:var(--footer-muted)}
.footer-bottom a{color:var(--footer-text)}

/* --------------------------------------------------------------------------
   Rechtsseiten
   -------------------------------------------------------------------------- */
.legal{padding:3.5rem 0}
.legal .prose h2{font-size:1.3rem;margin-top:2rem}
.legal .prose h3{font-size:1.05rem}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .timeline{grid-template-columns:repeat(3,1fr)!important}
  .nav-menu{
    display:none;position:absolute;top:68px;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:1rem var(--pad-x)}
  .nav-menu.open{display:flex}
  .nav-menu .nav-link{padding:.7rem 0;width:100%}
  .nav-menu .btn{margin:.6rem 0}
  .nav-toggle{display:block}
  .hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .timeline::before{display:none}
  .t-item::before{display:none}
  .t-item{padding-top:0}
}
@media (max-width:980px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .result-grid{grid-template-columns:1fr}
  .cols-3{grid-template-columns:1fr}
}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .timeline{grid-template-columns:1fr!important;gap:1rem}
  .t-item{display:flex;align-items:baseline;gap:.9rem;text-align:left}
  .t-year{flex:none;min-width:3.2rem}
  .t-card{flex:1;min-height:0}
  .t-tag{align-self:flex-start}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .check-row{flex-direction:column}
  .kpi-grid{grid-template-columns:1fr}
}

/* Ladezustaende */
.spinner{width:18px;height:18px;border:3px solid var(--primary-soft);
  border-top-color:var(--primary);border-radius:50%;display:inline-block;
  vertical-align:-3px;animation:wa-spin .8s linear infinite}
.spinner.small{width:13px;height:13px;border-width:2.5px}
@keyframes wa-spin{to{transform:rotate(360deg)}}
.status-line{display:flex;align-items:center;gap:.6rem;color:var(--muted);
  font-size:.9rem;margin-top:.9rem}
.t-loading{display:flex;align-items:center;gap:.7rem;color:var(--muted);
  font-size:.92rem;padding:1.2rem 0}
.k-value .spinner{margin-top:.3rem}
.err-note{color:var(--bad);font-size:.85rem;margin-top:.4rem}

/* Kurzbericht */
.report{font-size:.95rem;line-height:1.7}
.report p{margin-bottom:.7rem}
.report p:last-child{margin-bottom:0}

.btn-sm{padding:.35rem .95rem;font-size:.85rem}
#r-fresh{flex-wrap:wrap}

/* Cookie-Banner */
.cookie-banner{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:100;
  max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:0 10px 36px rgba(13,27,51,.22);
  padding:1.15rem 1.3rem}
.cookie-banner p{font-size:.9rem;margin-bottom:.85rem}
.cookie-actions{display:flex;gap:.7rem;flex-wrap:wrap}