/* ── Reset & Basis ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
@font-face {
  font-family: PoppinsBold;
  src: url(assets/Poppins-Bold.woff);
}

@font-face {
  font-family: PoppinsRegular;
  src: url(assets/Poppins-Regular.woff);
}

@font-face {
  font-family: Nunito;
  src: url(assets/Nunito-Regular.ttf);
}

html{scroll-behavior:smooth}
body{
  font-family:'Nunito',sans-serif;
  background: var(--bg);
  color: #fff;
  min-height:100vh;
  overflow-x:hidden;
}

/* ── CSS-Variablen ─────────────────────────────────────── */
:root{
  --opti-primary: #27271d;
  --opti-secondary: #54595f;
  --opti-text: #7a7a7a;
  --opti-accent: #26be48;
  --opti-grey-bg: #f6f6f6;
  --opti-accent-dark: #1f9e3b;
  --opti-green-bg: #e9f9ec;
  --green:  #23ffad;
  --amber:  #ffbd2e;
  --red:    #ff4060;
  --bg:     #27271d;
  --bg2:    #000;
  --bg3:    #111430;
  --border: rgba(255,255,255,.07);
  --font-bold: 'PoppinsBold',sans-serif;
  --font-regular:   'PoppinsRegular',sans-serif;
  --font-text: 'Nunito',sans-serif;
  --glow-c: 0 0 24px rgba(0,229,255,.25);
}

/* ── Hintergrundgitter ─────────────────────────────────── */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:
    linear-gradient(rgba(0,229,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,229,255,.04) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
  z-index:0;
}

/* ── Layout ────────────────────────────────────────────── */
.page{position:relative;z-index:1;max-width:1920px;margin:0 auto;padding:0 24px 80px;display:flex;align-items:center;flex-direction:column;}

/* ── Header ────────────────────────────────────────────── */
header{
  display:flex;align-items:center;gap:12px;
  padding:32px;background-color:#fff;width:100vw;
  justify-content:center;
}
header > div {
  max-width:1440px;
  width: 100%;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  max-width:1440px;width:fit-content;
}
.logo img {
  max-width: 280px;width:80%
}
.logo-text{font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--opti-text);}
.logo-sub{font-size:11px;font-family:var(--font-regular);color:var(--opti-accent);letter-spacing:.06em;margin-top:2px}


/* ── Hero ──────────────────────────────────────────────── */
.hero{
  text-align:center;
  padding:48px 0 24px;
}
.hero h1{
  font-family: var(--font-bold);
  font-size:clamp(2.2rem,5vw,3.6rem);
  font-weight:800;line-height:1.1;
  color:#fff;margin-bottom:20px;
  letter-spacing:-.02em;
}
.hero h1 em{
  font-style:normal;
  background-color: var(--opti-accent);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero p{
  font-size:1.1rem;color:var(--opti-bg-grey);
  max-width:630px;margin:0 auto;line-height:1.65;
  font-family: var(--font-text);
}

h2 {
  font-family: var(--font-bold);
  font-size:clamp(1.25rem,3vw,2.5rem);
  margin-top:80px;
}

/* ── Karte ─────────────────────────────────────────────── */
.disclaimer {
  font-size: 14px;
  padding: 20px;
  text-align: center;
  max-width: 1080px;
  margin: 0 auto;
}

.disclaimer a, #consent a, footer a {
  color: #fff;
  text-decoration-color:#26be48;
}

.disclaimer a:hover, #consent a:hover, footer a:hover {
  color:#23ffad;
}

#note {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* ── Karte ─────────────────────────────────────────────── */
.card{
  background:var(--bg2);
  border:1px solid var(--border);
  padding:40px;
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Formular ──────────────────────────────────────────── */
.card p {
  margin-bottom: 20px;
}

.card small {
  margin-bottom: 20px;
}

#form-section {
  max-width: 1080px;width: 100%;
}

.second-step {
  display: none;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:16px;
}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;
  font-family: 'PoppinsRegular';
}
.field input{
  background:#fff;
  border:1px solid rgba(255,255,255,.09);
  padding:13px 16px;
  font-family:'Nunito',sans-serif;font-size:15px;
  color:var(--opti-primary);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.field input:focus{
  border-color:rgba(0,229,255,.5);
  box-shadow:0 0 0 3px rgba(0,229,255,.08);
}
.field input::placeholder{color:rgba(0,0,0,0.5)}
.url-hint{
  font-size:14px;font-family:var(--opti-grey-bg);
  color: #fff;margin-top:4px;
}

.btn-submit{
  width:fit-content;margin-top:8px;
  background:var(--opti-accent);
  border:none;
  padding:15px;
  font-family:'PoppinsBold';font-size:20px;
  color:#fff;
  cursor:pointer;
  transition:opacity .2s,transform .1s,box-shadow .2s;
  position:relative;overflow:hidden;
}
.btn-submit:hover{opacity:.9;box-shadow:var(--opti-accent-dark)}
.btn-submit:active{transform:scale(.99)}
.btn-submit:disabled{opacity:.45;cursor:not-allowed}
.btn-submit a {
  text-decoration: none;
  color: #fff;
}

/* ── Schrittanzeige ────────────────────────────────────── */
.step-indicator{
  display:flex;align-items:center;justify-content:center;
  gap:0;margin-bottom:48px;
}
.step-dot{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  position:relative;
}
.step-dot-circle{
  width:36px;height:36px;border-radius:50%;
  border:2px solid rgba(255,255,255,.12);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:500;
  color:rgba(255,255,255,.3);
  background:var(--bg2);
  transition:all .3s;
  position:relative;z-index:1;
}
.step-dot.active   .step-dot-circle{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 0 3px rgba(0,229,255,.12)}
.step-dot.done     .step-dot-circle{border-color:var(--green);background:rgba(35,255,173,.1);color:var(--green)}
.step-dot-label{
  font-size:10px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.25);white-space:nowrap;
  transition:color .3s;
}
.step-dot.active .step-dot-label{color:var(--cyan)}
.step-dot.done   .step-dot-label{color:rgba(35,255,173,.6)}

.step-line{
  width:72px;height:2px;
  background:rgba(255,255,255,.07);
  margin:0 4px;
  margin-bottom:26px;
  flex-shrink:0;
  position:relative;overflow:hidden;
}
.step-line-fill{
  position:absolute;inset:0;
  background:var(--green);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s ease;
}
.step-line.done .step-line-fill{transform:scaleX(1)}

/* ── Lade-Overlay ──────────────────────────────────────── */
#loading{
  display:none;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:16px;
  padding:48px 40px;
  text-align:center;
}
.scan-ring{
  width:80px;height:80px;
  border:2px solid rgba(0,229,255,.15);
  border-top-color:var(--opti-accent);
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:0 auto 28px;
  position:relative;
}
.scan-ring::after{
  content:'';
  position:absolute;inset:6px;
  border:1px solid rgba(0,229,255,.08);
  border-bottom-color:rgba(0,229,255,.4);
  border-radius:50%;
  animation:spin 1.6s linear infinite reverse;
}
.scan-label{font-size:13px;font-family:var(--font-regular);color:rgba(255,255,255,.45);margin-bottom:28px}
#scan-steps{list-style:none;text-align:left;max-width:360px;margin:0 auto}
#scan-steps li{
  font-family:var(--font-regular);font-size:12px;
  color:rgba(255,255,255,.25);
  padding:5px 0;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--opti-grey-bg);
  transition:color .3s;
}
#scan-steps li.done{color:var(--green)}
#scan-steps li.active{color:#fff}
#scan-steps li .step-icon{width:14px;text-align:center;flex-shrink:0}

/* ── Ergebnis-Header ───────────────────────────────────── */
#results{display:none}
.result-header{
  display:flex;align-items:center;gap:32px;
  margin-bottom:32px;
  flex-wrap:wrap;
}
.score-ring-wrap{position:relative;width:120px;height:120px;flex-shrink:0}
.score-ring-wrap svg{width:100%;height:100%}
.score-ring-track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:7}
.score-ring-fill{
  fill:none;stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:301.593;
  stroke-dashoffset:301.593;
  transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1),stroke .4s;
}
.score-ring-text{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.score-number{font-size:2rem;color:#fff;line-height:1}
.score-label{font-size:9px;font-family:var(--font-regular);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:3px}

.result-meta{flex:1;min-width:200px}
.result-url{
  font-family:var(--font-regular);font-size:12px;
  color:var(--opti-accent);margin-bottom:6px;
  word-break:break-all;
}
.result-title{font-size:35px;color:#fff;}
.result-verdict{font-size:18px;color:#fff;}
.result-time{font-family:var(--font-regular);font-size:16px;color:var(--opti-accent);margin-top:8px}

/* ── Check-Karten ──────────────────────────────────────── */
.checks-list{display:flex;flex-direction:column;gap:12px}
.check-card{
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  overflow:hidden;
}
.check-header{
  display:flex;align-items:center;gap:16px;
  padding:16px 20px;
  cursor:pointer;
  user-select:none;
}
.check-header:hover{background:rgba(255,255,255,.03)}

.status-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
}
.s-pass .status-dot{background:var(--green);box-shadow:0 0 8px rgba(35,255,173,.5)}
.s-warn .status-dot{background:var(--amber);box-shadow:0 0 8px rgba(255,189,46,.4)}
.s-fail .status-dot{background:var(--red);box-shadow:0 0 8px rgba(255,64,96,.4)}

.check-name{font-size:20px;color:#fff;flex:1;font-family:'PoppinsRegular';}
.check-badge{
  font-family:var(--font-regular);font-size:16px;letter-spacing:.08em;
  padding:3px 10px;border-radius:100px;
}
.s-pass .check-badge{background:rgba(35,255,173,.12);color:var(--green)}
.s-warn .check-badge{background:rgba(255,189,46,.12);color:var(--amber)}
.s-fail .check-badge{background:rgba(255,64,96,.12);color:var(--red)}

.check-toggle{
  color:rgba(255,255,255,.25);font-size:18px;
  transition:transform .25s;
}
.check-card.open .check-toggle{transform:rotate(180deg)}

.check-body{
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
  border-top:0px solid var(--border);
}
.check-card.open .check-body{
  max-height:600px;
  border-top-width:1px;
}
.check-items{padding:16px 20px;display:flex;flex-direction:column;gap:10px}

.item-row{
  display:flex;align-items:flex-start;gap:12px;
}
.item-icon{
  width:16px;height:16px;flex-shrink:0;margin-top:5px;
  border-radius:50%;display:grid;place-items:center;
}
.item-icon.ip{background:rgba(35,255,173,.15);color:var(--green)}
.item-icon.iw{background:rgba(255,189,46,.15);color:var(--amber)}
.item-icon.if{background:rgba(255,64,96,.15);color:var(--red)}
.item-icon svg{width:10px;height:10px}

.item-content{flex:1}
.item-label{
  font-size:18px;font-family:var(--font-regular);color:#fff;text-transform:uppercase;margin-bottom:2px;
}
.item-text{font-size:16px;color:var(--opti-grey-bg);line-height:1.45}
.item-value{
  font-family:var(--font-regular);font-size:14px;
  color:var(--opti-text);margin-top:3px;
  word-break:break-all;
}

/* ── Ergebnis-Footer ───────────────────────────────────── */
.result-footer{
  margin-top:36px;
  padding:28px;
  background:linear-gradient(135deg,rgba(0,229,255,.06),rgba(123,95,255,.06));
  border:1px solid rgba(0,229,255,.12);
  border-radius:12px;
  text-align:center;
}
.result-footer p{font-size:14px;color:rgba(255,255,255,.5);line-height:1.6}
.result-footer strong{color:#fff}

.btn-restart{
  margin-top:20px;
  display:inline-block;
  background:transparent;
  border:1px solid rgba(0,229,255,.3);
  border-radius:8px;
  padding:10px 24px;
  font-family:'PoppinsRegular',sans-serif;font-size:13px;
  color:var(--opti-accent);cursor:pointer;
  transition:background .2s,border-color .2s;
}
.btn-restart:hover{background:rgba(0,229,255,.08);border-color:rgba(0,229,255,.5)}

/* ── Feature-Punkte ────────────────────────────────────── */


.features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,2fr));
  gap:16px;margin:56px 0;
  width:100%;max-width:1440px;
}
.feature{
  background:var(--opti-grey-bg);
  padding:22px;
}
.feature-icon{
  font-family:var(--font-bold);font-size:30px;
  color:var(--opti-accent);margin-bottom:10px;
}
.feature-title{font-size:22px;color:var(--opti-primary);margin-bottom:6px;}
.feature-desc{font-size:18px;color:var(--opti-primary);line-height:1.50;}

@media(max-width:1240px) and (min-width:1040px){
  .features{
    grid-template-columns:repeat(auto-fit,minmax(500px,2fr));
  }
}

@media(max-width:1039px) {
  .features{
    grid-template-columns:repeat(auto-fit,minmax(100px,90vw));
    justify-content: center;
  }

  .tools{
    grid-auto-flow: row !important;
    justify-content: center;
  }
}

/* -- Tools-Styles -- */
.tools {
  width:100%;
  display:grid;grid-auto-flow:column;gap:16px;margin:56px 0;padding:0 5%;
}
.tool-logos {
  display:flex;background-color:#f6f6f6;padding:40px 20px;justify-content:center;align-items:center;min-height:200px;
}
.tool-logos img {
  width: 75%;
  filter:brightness(100%) contrast(100%) saturate(0%) blur(0px) hue-rotate(0deg);
}

/* ── Animationen ───────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.anim-in{animation:fadeUp .4s ease both}

/* ── Responsiv ─────────────────────────────────────────── */
@media(max-width:640px){
  .card,.hero{padding:24px}
  .form-grid{grid-template-columns:1fr}
  .form-grid .full{grid-column:1}
  .result-header{flex-direction:column;align-items:flex-start}
  .hero h1{font-size:2rem}
}