/* =========================================================
   Loina Styles – treuetest.loina.de (FINAL)
   ========================================================= */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@600;700&family=Open+Sans:wght@400;600;700&display=swap');

/* ===== Reset & Base ===== */
* { margin:0; padding:0; box-sizing:border-box; }
img { max-width:100%; height:auto; display:block; }
html { -webkit-text-size-adjust: 100%; }
a { text-decoration:none; }

:root{
  --loina-bg:#111111;
  --loina-text:#E6E6E6;
  --loina-muted:#1A1A1A;
  --loina-gold:#D4AF37;
  --loina-rose:#C70039;
  --loina-border:#222;
  --paper-bg:#ffffff;
  --paper-text:#111111;
  --paper-muted:#fafafa;
  --paper-border:#e9e9e9;
  --shadow-dark:0 18px 50px rgba(0,0,0,.45);
  --shadow-paper:0 6px 30px rgba(0,0,0,.12);
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
}

/* Default (helle Seiten ohne .loina) */
body {
  font-family: 'Open Sans', Arial, sans-serif;
  background:#f6f9fb;
  color:#333;
  line-height:1.6;
}

/* ===== Loina Dark Theme NUR für Landing =====
   -> setze die Klasse .loina.landing auf der Startseite */
body.loina.landing{
  background:var(--loina-bg);
  color:var(--loina-text);
  font-family: Montserrat, 'Open Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: dark; /* nur Landing */
}

/* ===== Layout ===== */
.container{
  width:min(1180px,92vw);
  margin:0 auto;
  padding:24px;
}

.card{
  background: linear-gradient(180deg,#161616,#101010);
  border:1px solid var(--loina-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-dark);
  padding:24px;
  text-align:center;
}

/* ===== Typography ===== */
h1,h2,h3{
  font-family:"Playfair Display", Georgia, serif;
  color:var(--loina-gold);
  letter-spacing:.3px;
  margin:0 0 .6em;
}
h1{ font-size:clamp(28px,4.2vw,48px); line-height:1.1; }
h2{ font-size:clamp(22px,3vw,30px); }
h3{ font-size:clamp(18px,2.2vw,24px); }
p{ margin:.75em 0 1em; }

a{ color:var(--loina-rose); }
a:hover{ color:var(--loina-gold); }

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px; border:1px solid var(--loina-gold);
  background:linear-gradient(135deg,#1b1b1b,#121212);
  color:var(--loina-text); font-weight:600;
  padding:14px 20px; cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.btn:hover{ transform:translateY(-2px); border-color:var(--loina-rose); }
.btn:active{ transform:translateY(0); }
.btn[disabled], .pair-disabled{ opacity:.55; pointer-events:none; }
.btn.secondary{ border-color:#2b2b2b; background:#171717; box-shadow:none; }

/* Tastatur-Fokus */
.btn:focus-visible, a:focus-visible, .test-option:focus-visible, .answer:focus-visible{
  outline:2px solid var(--loina-rose);
  outline-offset:3px;
  border-radius:12px;
}

/* ===== Hero / Landing Highlights (Dark only) ===== */
body.loina.landing .hero{
  position:relative; border-radius:28px; padding:56px 28px; overflow:hidden;
  box-shadow:var(--shadow-dark);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(215,175,55,.25), transparent 60%),
    radial-gradient(800px 400px at 110% 10%, rgba(199,0,57,.18), transparent 60%),
    linear-gradient(180deg, #151515, #0e0e0e);
}
body.loina.landing .hero p{ opacity:.95; }

/* ===== Test-Auswahl (Index) – Dark only ===== */
body.loina.landing .test-options{
  display:flex; flex-wrap:wrap; gap:18px; margin-top:26px; justify-content:center;
}
body.loina.landing .test-option{
  flex:1 1 260px; min-width:260px;
  background: linear-gradient(180deg,#151515,#0f0f0f);
  border:1px solid var(--loina-border);
  border-radius:var(--radius-md);
  padding:18px; text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: var(--shadow-dark);
}
body.loina.landing .test-option:hover{ transform:translateY(-4px); border-color:var(--loina-gold); }
body.loina.landing .test-option h3{ margin-bottom:8px; }

/* ===== Ergebnis-Seite (Dark defaults – für Landing-Fälle) ===== */
.risk-wrap{
  margin:22px 0 10px; padding:18px; border-radius:16px;
  background:#0f0f0f; border:1px solid #232323;
}
.riskbar{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin-top:10px; }
.riskbar .cell{
  height:16px; border-radius:6px; background:#252525; border:1px solid #2f2f2f;
}
.riskbar .cell.active{
  background:linear-gradient(180deg,#c63,#a22);
  border-color:#cc5544;
  box-shadow:0 0 0 1px rgba(198,99,51,.4) inset;
}
.riskbar .cell.fill{
  background:linear-gradient(180deg,#ffcc99,#ff9966);
  border-color:#ff9966;
}
.risk-note{ margin-top:10px; font-weight:600; }
.eg-card{
  margin:18px 0; padding:18px; border-radius:14px;
  background:#101010; border:1px solid #242424;
}
.eg-meta{ display:flex; gap:14px; flex-wrap:wrap; margin:10px 0; }
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid rgba(212,175,55,.35); border-radius:999px; background:rgba(212,175,55,.08);
  color:#f0e6c8; font-size:.9rem;
}

/* ===== Listen & Kleinkram ===== */
ul{
  text-align:left; margin:1.2em auto 1.6em; padding-left:1.2em;
  max-width:640px; font-size:1rem;
}
ul li{ margin:.45em 0; }

.privacy-note{ margin-top:1.6em; font-size:.9em; color:#bcbcbc; text-align:center; }

/* =========================================================
   PAPER MODE (helle Test-/Ergebnis-Seiten: Fragen & Auswertung)
   ========================================================= */

/* WICHTIG: Hell erzwingen – verhindert dunkle native Form-Controls */
.paper{
  background:var(--paper-bg) !important;
  color:var(--paper-text) !important;
  border:1px solid var(--paper-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-paper);
  padding:22px;
  color-scheme: light; /* <- fix für Radios/Checkboxen auf Desktop */
}

/* Headlines auf Paper dunkler */
.paper h1, .paper h2, .paper h3{
  color:#1A1A1A;
}

/* Buttons auf Paper (hellere Variante) */
.paper .btn{
  background:#fff; color:#1A1A1A; border-color:#1A1A1A;
  box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.paper .btn:hover{ border-color:#000; transform:translateY(-2px); }
.paper .btn:focus-visible, .paper a:focus-visible{ outline-color:#111; }

/* Fragen-Blöcke in Papier-Optik */
.paper .competence-block{
  background:#ffffff !important; color:#111111 !important;
  border:1px solid var(--paper-border); border-radius:var(--radius-md);
  padding:18px; margin:18px 0;
}
.paper .question{
  background:var(--paper-muted) !important; color:#111111 !important;
  border:1px solid var(--paper-border); border-radius:12px;
  padding:14px 16px; margin:12px 0;
}
.paper .question > label,
.paper .answers label,
.paper .answers label span{ color:#111111 !important; }

/* Antworten-Grids */
.paper .answers{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:8px;
}
.paper .answers label{
  background:#ffffff !important; border:1px solid #dddddd;
  border-radius:10px; padding:8px 10px; display:flex; gap:8px; align-items:flex-start;
  transition:box-shadow .15s ease,border-color .15s ease; cursor:pointer;
}
.paper .answers label:hover{ border-color:#111111; box-shadow:0 2px 10px rgba(0,0,0,.06); }

/* Form Controls auf Papier – nativ, aber hell und klar */
.paper input[type="radio"],
.paper input[type="checkbox"]{
  accent-color:#111111; width:18px; height:18px;
}
.paper input[type="radio"],
.paper input[type="checkbox"],
.paper input,
.paper select,
.paper textarea{
  color-scheme: light; /* doppelte Absicherung */
}

/* Auswertung im Papier-Look (weiße Karten) */
.evaluation-paper{ background:#ffffff !important; color:#111 !important; }
.evaluation-paper .risk-wrap,
.evaluation-paper .eg-card{
  background:#ffffff !important; color:#111111 !important; border:1px solid var(--paper-border);
}
.evaluation-paper .pill{
  background:#f5f5f5; color:#222; border:1px solid #dddddd;
}

/* Links auf Papier */
.paper a, .evaluation-paper a{ color:#0b57d0; }
.paper a:hover, .evaluation-paper a:hover{ color:#000; }

/* Hover in Dark (falls Antworten dort gezeigt würden) */
body.loina.landing .answers label:hover{ border-color:#444; }

/* =========================================================
   Footer
   ========================================================= */
footer{ opacity:.7; text-align:center; padding:24px 0; font-size:13px; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px){
  .container{ padding:20px; }
  h1{ font-size:clamp(26px,6vw,36px); }
}
@media (max-width: 600px){
  .btn{ padding:12px 16px; }
  .card{ padding:18px; }
  body.loina.landing .test-options{ gap:14px; }
}

/* =========================================================
   Print (schwarz auf weiß, ohne Schatten)
   ========================================================= */
@media print{
  html, body{ background:#fff !important; color:#000 !important; }
  .container, .card, .paper, .evaluation-paper{
    box-shadow:none !important; background:#fff !important; color:#000 !important; border-color:#000 !important;
  }
  a{ color:#000 !important; text-decoration:underline; }
}
/* =========================================================
   HARD-FIX: Custom Radios/Checkboxes nur im PAPER-Bereich
   -> Unabhängig von System-Darkmode & Browser-UI
   ========================================================= */

.paper input[type="radio"],
.paper input[type="checkbox"]{
  -webkit-appearance: none !important;
  appearance: none !important;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  border-radius: 4px;                 /* Checkbox: eckig; Radio überschreiben wir gleich auf rund */
  border: 2px solid #1A1A1A !important;
  background: #fff !important;        /* immer weiß (unchecked) */
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  box-shadow: none !important;
  filter: none !important;
}

/* Radios rund machen */
.paper input[type="radio"]{
  border-radius: 50% !important;
}

/* Der „Punkt“ (Radio) bzw. das „Häkchen“ (Checkbox) als Pseudo-Element */
.paper input[type="radio"]::after,
.paper input[type="checkbox"]::after{
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .12s ease-in-out;
}

/* Radio: schwarzer Punkt */
.paper input[type="radio"]::after{
  border-radius: 50%;
  background: #000;
}

/* Checkbox: kleines gefülltes Quadrat (neutral & klar) */
.paper input[type="checkbox"]::after{
  border-radius: 2px;
  background: #000;
}

/* Checked-Zustand sichtbar machen */
.paper input[type="radio"]:checked::after,
.paper input[type="checkbox"]:checked::after{
  transform: scale(1);
}

/* Fokus sichtbar (Loina-Primär als Ring) */
.paper input[type="radio"]:focus,
.paper input[type="checkbox"]:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(199, 0, 57, .25) !important; /* #C70039 */
  border-color: #C70039 !important;
}

/* Disabled-Zustand */
.paper input[type="radio"]:disabled,
.paper input[type="checkbox"]:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Sicherheitsnetz gegen globale Dark-/Filter-Regeln */
.paper input[type="radio"],
.paper input[type="checkbox"],
.paper .answers label {
  background-color: #fff !important;
  color-scheme: light !important;
  filter: none !important;
}

/* Abstand zwischen Control und Text (falls nötig) */
.paper .answers label{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* Optional: schöner Hover-Rand auf den Antwort-Karten */
.paper .answers label:hover{
  border-color: #111111;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}