:root{
  --bg:#0b0f14;
  --text:#e6edf3;
  --card:#121823;
  --border:#1f2a3a;
  --border2:#263347;

  --btn:#2b7fff;
  --btnText:#07101c;

  --warn:#b30000;
  --ok:#a7f3d0;

  --amber:#f59e0b;
}

/* ---------- base ---------- */
*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

.wrap{
  max-width:980px;
  margin:0 auto;
  padding:24px;
}

h1{ font-size:22px; margin:0 0 6px; }

p{ opacity:.9; line-height:1.35; }

ul{ margin:8px 0 0 18px; padding:0; }
li{ margin:6px 0; }

.muted{ opacity:.75; font-size:12px; }
.warn{ color:var(--warn); }
.ok{ color:var(--ok); }

/* ---------- layout ---------- */
.topnav{
  display:flex;
  gap:10px;
  align-items:center;
  margin:10px 0 18px;
  flex-wrap:wrap;
}

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:14px;
}

.pair-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 14px;
  margin-top:12px;
}

/* ---------- cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  margin:14px 0;
}

.hr{
  height:1px;
  background:var(--border);
  margin:14px 0;
}

.subcard{
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:14px;
  padding:14px 16px;
}

.subhead{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.subtitle{
  font-weight:800;
  font-size:14px;
}

/* ---------- links / buttons ---------- */
.linkbtn{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border2);
  color:var(--text);
  text-decoration:none;
  background:var(--card);
}

.linkbtn:hover{ border-color:var(--btn); }

.btn{
  background:var(--btn);
  border:0;
  color:var(--btnText);
  font-weight:800;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
}

.btn:hover{ filter:brightness(1.06); }

.btn.btn-primary{
  min-width:220px;
  padding:12px 18px;
  border-radius:14px;
  letter-spacing:.2px;
}

/* ---------- inputs ---------- */
label{
  display:block;
  font-size:12px;
  opacity:.85;
  margin:0 0 6px;
}

input{
  width:100%;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--border2);
  background:var(--bg);
  color:var(--text);
}

.field{ margin:0; }

.field-label{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:12px;
}

.field-meta{
  font-size:11px;
  opacity:.55;
  letter-spacing:.2px;
}

/* ---------- micro (Fe) special ---------- */
.micro-field{
  position:relative;
  padding-top:6px;
}

.micro-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:6px;
}

.micro-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--card);
  font-size:11px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:lowercase;
  opacity:.95;
}

.micro-title{ font-size:12px; font-weight:900; opacity:.95; }
.micro-unit{ font-size:12px; opacity:.65; }

.micro-sub{
  font-size:11px;
  opacity:.6;
  margin:-2px 0 8px;
}

.micro-field input{
  max-width:180px;
}

.micro-field input:focus{
  outline:none;
  border-color:var(--btn);
  box-shadow:0 0 0 2px rgba(43,127,255,.15);
}

/* ---------- hero ---------- */
.hero-card{ padding:16px; }

.hero-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}

.hero-title{
  font-size:16px;
  font-weight:800;
}

.hero-badge{
  border:1px solid var(--border2);
  background:var(--bg);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  opacity:.9;
}

.hero-body{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}

.hero-input input{
  font-size:18px;
  padding:12px 12px;
}

.hero-kpi{
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:14px;
  padding:12px 14px;
}

.hero-kpi-value{
  font-size:26px;
  font-weight:900;
  margin:4px 0 2px;
}

/* ---------- presets ---------- */
.preset-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 12px;
}

.chip{
  border:1px solid var(--border2);
  background:var(--bg);
  color:var(--text);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:800;
}

.chip:hover{ border-color:var(--btn); }

/* ---------- status ---------- */
.status-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}

.status-card{
  background:var(--bg);
  border:1px solid var(--border2);
  border-radius:14px;
  padding:14px 16px;
}

.status-card.ok{ border-left:4px solid var(--ok); }
.status-card.warn{ border-left:4px solid var(--warn); }

.status-title{ font-size:12px; opacity:.75; margin-bottom:6px; }
.status-value{ font-size:20px; font-weight:900; margin-bottom:4px; }
.status-text{ font-size:13px; opacity:.85; }

/* ---------- hint ---------- */
.hint-line{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border2);
  background:var(--bg);
  border-radius:12px;
  font-size:13px;
  opacity:.95;
}

.hint-badge{
  border:1px solid var(--border2);
  background:var(--card);
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}

/* ---------- details / accordion ---------- */
.details-box{
  margin-top:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px 16px;
}

.details-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  font-weight:900;
  list-style:none;
}

.details-summary::-webkit-details-marker{ display:none; }

.sum-left{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.sum-title{ font-weight:900; }

.sum-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.details-summary::after{
  content:"▾";
  opacity:.7;
  transition:transform .2s ease;
}

.details-box[open] .details-summary::after{
  transform:rotate(180deg);
}

.details-content{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--border2);
}

.details-content h4{ margin:10px 0 6px; font-size:14px; }
.details-content p{ margin:0 0 10px; line-height:1.35; }

/* ---------- toggle ---------- */
.toggle-line{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  cursor:pointer;
  padding:10px 0;
}

.toggle-line input{
  width:auto;
  margin:0;
  transform:scale(1.15);
}

.toggle-text{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}

.toggle-title{ font-weight:900; }
.toggle-sub{ opacity:.75; font-size:12px; }

/* ---------- results ---------- */
.result-wrap{ padding-top:14px; }

.result-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}

.result-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin:12px 0 6px;
}

.result-note{
  text-align:center;
  max-width:520px;
  opacity:.75;
  line-height:1.35;
}

.section-title{ margin:0 0 10px; font-size:16px; }

.result-card{
  background:rgba(255,255,255,.015);
  border:1px solid var(--border2);
  border-radius:14px;
  padding:12px 14px;
  margin:10px 0;
}

.result-main{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.result-title{ font-weight:900; font-size:13px; opacity:.95; }

.result-ml{
  font-size:28px;
  font-weight:900;
  letter-spacing:.2px;
}

.result-sub{ width:100%; margin-top:2px; font-size:12px; opacity:.68; }

.result-details{
  margin-top:10px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border2);
  border-radius:12px;
  padding:8px 10px;
}

.result-details summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
}

.result-details summary::-webkit-details-marker{ display:none; }

/* ---------- product / recommendation cards ---------- */
.reco-subtitle{
  margin:16px 0 10px;
  font-size:14px;
  font-weight:800;
}

.reco-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px 14px;
}

.cardlink{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--border2);
  background:var(--bg);
  text-decoration:none;
  color:var(--text);
  transition:transform .12s ease, border-color .12s ease, filter .12s ease;
}

.cardlink:hover{
  border-color:var(--btn);
  transform:translateY(-1px);
  filter:brightness(1.03);
}

.cardlink.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

.cardlink-img{
  width:76px;
  height:76px;
  border-radius:12px;
  border:1px solid var(--border2);
  overflow:hidden;
  flex:0 0 auto;
  background:rgba(255,255,255,0.02);
  display:flex;
  align-items:center;
  justify-content:center;
}

.cardlink-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.img-placeholder{ font-size:12px; opacity:.65; }

.cardlink-body{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.cardlink-title{
  font-size:14px;
  font-weight:800;
  line-height:1.2;
}

.cardlink-hint{
  font-size:12px;
  opacity:.75;
  line-height:1.3;
}

.cardlink-cta{
  font-size:12px;
  font-weight:800;
  color:var(--btn);
  opacity:.95;
}

/* ---------- unified notices / callouts (nicht transparent) ---------- */
.callouts{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:14px 0;
}

.notice{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid var(--border2);
  background:var(--card);               /* wichtig: card statt bg */
  position:relative;
}

.notice::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
}

.notice-badge{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  border:1px solid var(--border2);
  background:var(--bg);
  white-space:nowrap;
  text-transform:lowercase;
}

.notice-body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.notice-title{ font-weight:900; font-size:14px; }
.notice-text{ font-size:13px; opacity:.92; line-height:1.35; margin:0; }

.notice.info::before{ background:var(--btn); }
.notice.ok::before{ background:var(--ok); }
.notice.warn::before{ background:var(--amber); }
.notice.danger::before{ background:var(--warn); }

/* ---------- brand footer ---------- */
.brand-footer{
  margin:18px 0 6px;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border2);
  background:var(--bg);
  text-align:center;
}

.brand-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--card);
  font-weight:900;
  letter-spacing:.3px;
  margin-bottom:8px;
}

/* ---------- legacy links list (falls noch genutzt) ---------- */
.links a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border2);
  text-decoration:none;
  color:var(--text);
  background:var(--bg);
  margin:8px 0;
}

.links a:hover{ border-color:var(--btn); }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid2{ grid-template-columns:1fr; }
  .pair-grid{ grid-template-columns:1fr; }
  .status-grid{ grid-template-columns:1fr; }
  .hero-body{ grid-template-columns:1fr; }
  .micro-field input{ max-width:100%; }
  .reco-grid{ grid-template-columns:1fr; }
}
/* ===== INDEX: weniger bunt, bessere Blickführung ===== */

/* Standard: Kacheln neutral, keine Farbbalken-Orgie */
.home-tile .notice{
  background:rgba(255,255,255,0.015);
  border:1px solid var(--border2);
}

/* Im Index: Farbbalken grundsätzlich aus */
.home-tile .notice::before{
  background:transparent !important;
}

/* Badge im Index: neutral, ruhig */
.home-tile .notice-badge{
  border-color:var(--border2) !important;
  background:rgba(255,255,255,0.02) !important;
  color:rgba(230,237,243,0.9) !important;
}

/* CTA bleibt blau als einziger klarer Blickanker */
.home-cta{
  color:var(--btn);
}

/* Hover: nur leicht, kein Farbgewitter */
.home-tile:hover .notice{
  border-color:rgba(43,127,255,0.35);
  filter:brightness(1.02);
}

/* Warnung: EIN klarer Akzent (links) + dezenter Hintergrund */
.home-tile .notice.warn{
  background:rgba(245,158,11,0.06);
  border-color:rgba(245,158,11,0.25);
}
.home-tile .notice.warn::before{
  background:#f59e0b !important;
}

/* Gefahr: wenn du später richtig rot willst (optional) */
.home-tile .notice.danger{
  background:rgba(239,68,68,0.06);
  border-color:rgba(239,68,68,0.25);
}
.home-tile .notice.danger::before{
  background:#ef4444 !important;
}

/* Wichtig: keine roten Textflächen im Index (die schreien zu hart) */
.home-tile .notice-text{
  color:rgba(230,237,243,0.9);
}
/* =========================
   MOBILE OPTIMIERUNG
   ========================= */

/* etwas mehr Luft links/rechts + bessere Lesbarkeit */
@media (max-width: 520px){
  .wrap{
    padding:16px;
  }

  .card{
    padding:14px;
    border-radius:16px;
  }

  p{ line-height:1.45; }

  /* Top-Buttons nicht so gequetscht */
  .topnav{
    gap:8px;
  }
  .linkbtn{
    padding:10px 12px;
    border-radius:14px;
  }

  /* Hero: alles untereinander + etwas mehr spacing */
  .hero-head{
    align-items:flex-start;
    gap:10px;
    margin-bottom:12px;
  }

  .hero-body{
    grid-template-columns:1fr;
    gap:12px;
  }

  .hero-input input{
    font-size:18px;
    padding:14px 12px;
    border-radius:12px;
  }

  .hero-kpi{
    padding:14px;
    border-radius:16px;
  }

  .hero-kpi-value{
    font-size:28px;
    line-height:1.05;
  }

  /* Inputs allgemein: mehr fingerfreundlich */
  input{
    padding:14px 12px;
    border-radius:12px;
  }

  /* Pair/Grid: wirklich 1 Spalte, mehr Abstand */
  .pair-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  /* Info-Kacheln: mehr Innenabstand + bessere Textführung */
  .notice{
    padding:14px;
    border-radius:16px;
    gap:12px;
  }
  .notice-title{
    font-size:14px;
  }
  .notice-text{
    font-size:13px;
    line-height:1.45;
  }
  .notice-badge{
    height:24px;
    padding:0 10px;
    font-size:12px;
  }

  /* Status-Karten und Ergebnis-Karten: mehr Luft */
  .status-card{
    padding:14px;
    border-radius:16px;
  }
  .status-value{
    font-size:22px;
  }

  .result-card{
    padding:14px;
    border-radius:16px;
  }
  .result-ml{
    font-size:30px;
    line-height:1.05;
  }

  /* Details (Accordion): weniger „Blockig“ */
  .details-box{
    padding:14px;
    border-radius:16px;
  }

  /* Links/Empfehlungskarten: Bild kleiner, Text sauber */
  .cardlink{
    padding:12px;
    border-radius:16px;
  }
  .cardlink-img{
    width:58px;
    min-width:58px;
    height:58px;
    border-radius:14px;
  }
}