/* STYLES: diagnose.html — Tabellen-Diagnose */

html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:'Inter', sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; }

/* NAV */
nav{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding: 20px clamp(20px, 5vw, 64px); background:rgba(10,20,32,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-mark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.nav-mark img{ height:32px; width:32px; display:block; }
.nav-mark span{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:17px; letter-spacing:-0.015em; }
.nav-mark em{ font-style:normal; font-weight:600; color:var(--accent); }
.nav-link{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-muted); text-decoration:none; }
.nav-link:hover{ color:var(--accent); }
.nav-cta{
  font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text);
  border:1px solid var(--border); padding:9px 18px; border-radius:2px; text-decoration:none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.nav-cta:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* HERO */
.hero{
  padding:88px 24px 52px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/90px 90px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/90px 90px,
    radial-gradient(ellipse at 50% 0%, rgba(94,234,212,0.08), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--border);
}
.hero-inner{ max-width:820px; margin:0 auto; }
.eyebrow{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--accent-2); letter-spacing:0.18em; text-transform:uppercase; display:block; }
.hero h1{ margin-top:16px; font-size:clamp(30px,4.8vw,48px); line-height:1.12; }
.hero p{ margin-top:18px; font-size:16px; line-height:1.7; color:var(--text-muted); }

main{ max-width:900px; margin:0 auto; padding:48px 24px 80px; }
main a{ color:var(--accent); }

/* DATENSCHUTZ-VERSPRECHEN */
.versprechen{
  display:flex; gap:20px; align-items:flex-start;
  border:1px solid rgba(94,234,212,0.4); background:var(--accent-soft);
  padding:24px 26px;
}
.v-siegel{ flex:0 0 auto; width:36px; height:36px; color:var(--accent); }
.v-siegel svg{ width:100%; height:100%; }
.v-text strong{ font-family:'Space Grotesk',sans-serif; font-size:17px; color:var(--text); }
.v-text p{ margin-top:8px; font-size:14px; line-height:1.7; color:var(--text-muted); }

/* DROP-ZONE */
.drop-zone{
  position:relative; margin-top:28px; min-height:280px; cursor:pointer;
  border:1.5px dashed var(--line-bright); background:var(--card-bg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  transition:border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.drop-zone:hover, .drop-zone:focus-visible{ border-color:var(--accent); background:var(--bg-2); outline:none; }
.drop-zone.aktiv{ border-color:var(--accent); background:var(--accent-soft); transform:scale(1.005); }
.dz-raster{
  position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/44px 44px;
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
}
.dz-inhalt{ position:relative; text-align:center; padding:36px 24px; }
.dz-symbol{
  width:66px; height:66px; margin:0 auto 20px;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:3px;
}
.dz-symbol span{ background:var(--line-bright); border-radius:1px; transition:background 0.25s ease, transform 0.4s ease; }
.dz-symbol span:nth-child(9){ background:var(--accent); }
.drop-zone:hover .dz-symbol span:nth-child(9),
.drop-zone.aktiv .dz-symbol span:nth-child(9){ transform:translate(7px, 7px); }
.dz-inhalt h2{ font-size:21px; }
.dz-inhalt p{ margin-top:8px; font-size:14px; color:var(--text-muted); }
.dz-formate{
  display:inline-block; margin-top:18px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted);
  border:1px solid var(--border); border-radius:2px; padding:5px 12px;
}

/* LAUFANZEIGE + FEHLER */
.diag-lauf{
  margin-top:20px; display:flex; align-items:center; gap:12px;
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--accent);
}
.lauf-punkt{
  width:9px; height:9px; border-radius:50%; background:var(--accent);
  animation:laufPuls 1.1s ease-in-out infinite;
}
@keyframes laufPuls{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.3; transform:scale(0.75); } }
.diag-fehler{
  margin-top:20px; border-left:2px solid #FF7B72; background:rgba(255,123,114,0.06);
  padding:14px 18px; font-size:14px; line-height:1.7; color:#FF9E98;
}

/* WAS GEPRUEFT WIRD */
.hinweis-block{ margin-top:52px; padding-top:40px; border-top:1px solid var(--border); }
.hinweis-block h3{ font-size:19px; }
.pruef-liste{ margin-top:24px; display:grid; grid-template-columns:1fr 1fr; gap:22px 32px; }
.p-item strong{
  display:block; font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600;
  color:var(--text); padding-left:16px; position:relative;
}
.p-item strong::before{ content:''; position:absolute; left:0; top:7px; width:7px; height:7px; background:var(--accent); }
.p-item p{ margin-top:7px; padding-left:16px; font-size:13px; line-height:1.6; color:var(--text-muted); }
@media (max-width:700px){ .pruef-liste{ grid-template-columns:1fr; } }

/* ERGEBNIS */
.erg-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.erg-kopf h2{ margin-top:12px; font-size:clamp(24px,3.6vw,34px); line-height:1.2; }
.erg-datei{
  margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted);
}
.score-box{ flex:0 0 auto; text-align:right; }
.score-zahl{ font-family:'Space Grotesk',sans-serif; font-size:52px; font-weight:600; color:var(--accent); line-height:1; }
.score-zahl small{ font-size:19px; color:var(--text-muted); font-weight:400; }
.score-label{
  margin-top:4px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--text-muted);
}
.score-spur{ margin-top:26px; height:3px; background:var(--border); }
.score-balken{ height:3px; width:0; transition:width 0.9s cubic-bezier(.16,1,.3,1); background:var(--accent); }
.score-balken.gruen{ background:var(--accent); }
.score-balken.gelb{ background:#B7E86A; }
.score-balken.orange{ background:var(--accent-2); }
.score-balken.rot{ background:#FF7B72; }
.erg-stufe-text{ margin-top:22px; font-size:15px; line-height:1.75; color:var(--text-muted); max-width:820px; }

.kennzahlen{
  margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--border); border:1px solid var(--border);
}
.k-feld{ background:var(--bg); padding:18px 20px; }
.k-feld label{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted);
}
.k-feld p{
  margin-top:7px; font-family:'Space Grotesk',sans-serif; font-size:25px; font-weight:600;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.k-feld p.rot{ color:#FF7B72; }
@media (max-width:700px){ .kennzahlen{ grid-template-columns:1fr 1fr; } }

.befunde-titel{ margin-top:52px; font-size:20px; }
.befunde{ margin-top:20px; display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.befund{ background:var(--card-bg); padding:22px 24px; border-left:2px solid var(--border); }
.befund.krit{ border-left-color:#FF7B72; }
.befund.warn{ border-left-color:var(--accent-2); }
.befund.info{ border-left-color:var(--line-bright); }
.befund.ok{ border-left-color:var(--accent); }
.befund-kopf{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.befund-badge{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  border:1px solid currentColor; border-radius:2px; padding:3px 8px;
}
.befund.krit .befund-badge{ color:#FF7B72; }
.befund.warn .befund-badge{ color:var(--accent-2); }
.befund.info .befund-badge{ color:var(--text-muted); }
.befund.ok .befund-badge{ color:var(--accent); }
.befund-kopf strong{ font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:600; color:var(--text); }
.befund p{ margin-top:10px; font-size:14px; line-height:1.7; color:var(--text-muted); }

.erg-cta{
  margin-top:52px; padding-top:40px; border-top:1px solid var(--border);
  display:grid; grid-template-columns:1.4fr 1fr; gap:34px; align-items:start;
}
.erg-cta h3{ font-size:20px; }
.erg-cta p{ margin-top:12px; font-size:14px; line-height:1.7; color:var(--text-muted); }
.erg-cta-knoepfe{ display:flex; flex-direction:column; gap:12px; }
.cta-link{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:14px; line-height:1.3;
  color:var(--bg); background:var(--accent); border:none; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  padding:14px 28px; border-radius:2px; text-decoration:none; text-align:center;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-link:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(94,234,212,0.25); }
.ghost-link{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:14px; line-height:1.3;
  color:var(--text); border:1px solid var(--border); background:transparent; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  padding:14px 28px; border-radius:2px; text-decoration:none; text-align:center;
  transition:border-color 0.25s ease, background 0.25s ease;
}
.ghost-link:hover{ border-color:var(--accent); background:var(--accent-soft); }
@media (max-width:760px){ .erg-cta{ grid-template-columns:1fr; } }

/* FOOTER */
footer{
  background:var(--bg); padding:36px 24px; text-align:center;
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-muted);
  border-top:1px solid var(--border);
}
footer a{ color:var(--text-muted); } footer a:hover{ color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .lauf-punkt{ animation:none; }
  .score-balken, .dz-symbol span, .drop-zone{ transition:none; }
}

/* Beispieldatei-Angebot */
.beispiel-zeile{
  margin-top:18px; font-size:14px; color:var(--text-muted);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.beispiel-link{
  background:transparent; border:none; cursor:pointer; padding:0;
  font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--accent);
  border-bottom:1px solid rgba(94,234,212,0.4); transition:border-color 0.2s ease;
}
.beispiel-link:hover{ border-bottom-color:var(--accent); }
.beispiel-note{ font-size:13px; opacity:0.8; }

/* Brücke zum Modell-Konfigurator */
.bruecke{
  margin-top:52px; display:grid; grid-template-columns:1.5fr 1fr; gap:34px; align-items:start;
  border:1px solid rgba(94,234,212,0.4); background:var(--accent-soft); padding:32px 34px;
}
.bruecke-text h3{ margin-top:12px; font-size:21px; line-height:1.3; }
.bruecke-text p{ margin-top:12px; font-size:14px; line-height:1.7; color:var(--text-muted); }
.bruecke-liste{ margin-top:16px; list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; }
.bruecke-liste li{
  position:relative; padding-left:18px; font-size:13px; line-height:1.6; color:var(--text-muted);
}
.bruecke-liste li::before{
  content:''; position:absolute; left:0; top:7px; width:7px; height:7px; background:var(--accent);
}
.bruecke-aktion{ display:flex; flex-direction:column; gap:12px; }
.bruecke-zahlen{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--accent);
}
.bruecke-note{ font-size:12px; line-height:1.6; color:var(--text-muted); }
@media (max-width:760px){ .bruecke{ grid-template-columns:1fr; padding:26px 24px; } }