/* ===================================================================
   Antreibertest  ·  Robert Jautschus
   Stylesheet. Farben und Abstände stehen als Variablen ganz oben.
   Wer nur Texte ändern will, braucht diese Datei nicht anzufassen.
   =================================================================== */

/* ── @font-face ── */
@font-face { font-family:'Rooney'; src:url('../fonts/Rooney-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Rooney'; src:url('../fonts/Rooney-LightItalic.woff2') format('woff2'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Rooney'; src:url('../fonts/Rooney-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'RooneySans'; src:url('../fonts/RooneySans-Light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'RooneySans'; src:url('../fonts/RooneySans-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

:root{
  --blau:#193e6a;

  --blau-soft:#e8eef5;
  --gruen:#a7c400;
  --gruen-dunkel:#8aa300;
  --magenta:#c10088;
  --weiss:#ffffff;
  --grau:#f6f7f9;
  --grau-linie:#dfe3e8;
  --text:#22303f;
  --text-leise:#5d6b7a;

  --serif:'Rooney', 'Playfair Display', Georgia, serif;
  --sans:'RooneySans', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max:720px;
  --radius:14px;
  --schatten:0 2px 18px rgba(25,62,106,.10);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--grau); color:var(--text);
  font-family:var(--serif); font-weight:300; font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.sans{font-family:var(--sans); color:var(--blau);}
h1{font-size:2.1rem; line-height:1.2; font-weight:500; margin:0 0 .6em;}
h2{font-size:1.5rem; line-height:1.25; font-weight:500; margin:0 0 .5em;}
h3{font-size:1.1rem; font-weight:500; margin:0 0 .3em;}
p{margin:0 0 1em;}
a{color:var(--blau); text-decoration:underline; text-underline-offset:2px;}

/* ── Rahmen ── */
.kopf{background:var(--weiss); border-bottom:1px solid var(--grau-linie); padding:14px 20px;}
.kopf img{height:34px; display:block;}
.buehne{max-width:var(--max); margin:0 auto; padding:40px 20px 80px;}
.karte{background:var(--weiss); border-radius:var(--radius); box-shadow:var(--schatten); padding:32px 28px;}
.fuss{text-align:center; font-size:.85rem; color:var(--text-leise); padding:30px 20px 50px;}
.fuss a{color:var(--text-leise);}

/* ── Etiketten ── */
.label{
  font-family:var(--sans); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--magenta); font-weight:500; margin:0 0 .8em;
}

/* ── Buttons ── */
.btn{
  display:inline-block; font-family:var(--sans); font-weight:500; font-size:1.05rem;
  background:var(--gruen); color:var(--blau); border:0; border-radius:999px;
  padding:16px 34px; cursor:pointer; text-decoration:none; transition:background .15s;
}
.btn:hover{background:var(--gruen-dunkel);}
.btn-leise{
  background:none; border:0; color:var(--text-leise); font-family:var(--sans);
  font-size:.9rem; cursor:pointer; padding:10px 4px; text-decoration:underline;
}
.mikro{font-size:.85rem; color:var(--text-leise); margin-top:12px;}

/* ── Fortschritt ── */
.fortschritt{margin-bottom:26px;}
.fortschritt-zeile{
  display:flex; justify-content:space-between; font-family:var(--sans);
  font-size:.8rem; color:var(--text-leise); margin-bottom:8px;
}
.balken{height:6px; background:var(--blau-soft); border-radius:999px; overflow:hidden;}
.balken span{display:block; height:100%; width:0; background:var(--gruen); transition:width .25s ease;}

/* ── Frage ── */
.frage{font-size:1.35rem; line-height:1.4; font-family:var(--serif); font-weight:300; margin:0 0 28px;}
.skala{display:flex; flex-direction:column; gap:10px;}
.skala button{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:var(--weiss); border:1.5px solid var(--grau-linie); border-radius:12px;
  padding:14px 18px; font-family:var(--sans); font-size:1rem; color:var(--text);
  cursor:pointer; transition:border-color .12s, background .12s;
}
.skala button:hover{border-color:var(--gruen); background:#fbfdf2;}
.skala button .punkt{
  flex:0 0 26px; height:26px; border-radius:50%; background:var(--blau-soft);
  color:var(--blau); font-size:.8rem; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.skala button:hover .punkt{background:var(--gruen); color:var(--blau);}

/* ── Ergebnis ── */
.treffer{
  background:var(--blau); color:var(--weiss); border-radius:var(--radius);
  padding:30px 28px; margin-bottom:26px;
}
.treffer .label{color:var(--gruen);}
.treffer h2{color:var(--weiss); font-size:1.9rem; margin-bottom:.4em;}
.treffer p{margin-bottom:0; opacity:.92;}

.verteilung{margin:0 0 30px;}
.zeile{margin-bottom:14px;}
.zeile .kopfzeile{
  display:flex; justify-content:space-between; font-family:var(--sans);
  font-size:.92rem; margin-bottom:5px;
}
.zeile .schiene{height:10px; background:var(--blau-soft); border-radius:999px; overflow:hidden;}
.zeile .schiene i{display:block; height:100%; background:var(--blau); border-radius:999px; transition:width .5s ease;}
.zeile.stark .schiene i{background:var(--gruen);}
.zeile.stark .kopfzeile{color:var(--blau); font-weight:500;}

.optin{border-top:1px solid var(--grau-linie); padding-top:28px; margin-top:8px;}
.optin ul{margin:0 0 20px; padding-left:20px;}
.optin li{margin-bottom:8px;}
.formular-platz{
  background:var(--grau); border:1px dashed var(--grau-linie); border-radius:12px;
  padding:22px; font-family:var(--sans); font-size:.9rem; color:var(--text-leise);
}

.ausblick{
  background:var(--weiss); border-left:4px solid var(--gruen);
  border-radius:0 var(--radius) var(--radius) 0; padding:22px 24px; margin-top:26px;
  box-shadow:var(--schatten);
}
.ausblick p:last-child{margin-bottom:0;}

.einordnung{
  border-top:1px solid var(--grau-linie); padding-top:24px; margin-top:26px;
}
.einordnung p:last-child{margin-bottom:0;}

/* ── Quellenangabe, bewusst zurückgenommen ── */
.quelle{
  margin-top:26px; padding:20px 24px;
  border:1px solid var(--grau-linie); border-radius:var(--radius);
  background:none; font-size:.92rem; color:var(--text-leise);
}
.quelle p:last-child{margin-bottom:0;}
.quelle a{color:var(--blau);}

/* ── Sichtbarkeit ── */
[hidden]{display:none !important;}

/* ── Mobil ── */
@media (max-width:600px){
  body{font-size:17px;}
  h1{font-size:1.7rem;}
  .buehne{padding:26px 16px 60px;}
  .karte{padding:24px 20px;}
  .frage{font-size:1.2rem;}
  .treffer{padding:24px 20px;}
  .treffer h2{font-size:1.5rem;}
}

/* Druckansicht: Ergebnis mitnehmen können */
@media print{
  .kopf,.optin,.ausblick,.quelle,.btn,.btn-leise{display:none !important;}
  body{background:#fff;}
  .karte{box-shadow:none;}
}