/* Bewusst ohne Framework: eine Datei, die man ganz liest. */

/* Farben nach frankruft.de/apps/flux: dunkles Marineblau, Mint als Akzent.
   Bewusst nur ein Schema — ein zweites, helles sähe nicht mehr danach aus. */
:root {
  --papier: #0a192f;
  --tinte: #e6f1ff;
  --leise: #9fb3d1;
  --linie: #233554;
  --akzent: #64ffda;
  --akzent-warm: #4cd8b2;
  --ueberschrift: #82daff;
  --warnung: #f7b955;
  --flaeche: #112240;
  --eingabe: #1e3a5f;
}

/* Systemschrift statt geladener Webfont: nichts wird von fremden Servern
   nachgeladen, also erfährt auch niemand Drittes, wer die Seite aufruft. */
:root {
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1.5rem 4rem;
  background: var(--papier);
  color: var(--tinte);
  font: 1rem/1.6 var(--schrift);
}

header, main, footer { max-width: 68rem; margin: 0 auto; }

header { padding: 2rem 0 1rem; border-bottom: 1px solid var(--linie); }
.marke { font-size: 1.6rem; font-weight: 700; color: var(--tinte); text-decoration: none; }
.untertitel { margin: .2rem 0 0; color: var(--leise); }

h1, h2 { color: var(--ueberschrift); font-weight: 600; letter-spacing: -.5px; }
h1 { font-size: 1.9rem; margin: 2rem 0 .4rem; }
h2 { font-size: 1.15rem; margin: 0 0 .3rem; }
.zweck { color: var(--leise); margin-top: 0; }
.meta { color: var(--leise); font-size: .87rem; }
.warnung { color: var(--warnung); }

/* Filter */
.filter { margin: 1rem 0 1.5rem; }
.filterzeile { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; margin: .4rem 0; }
.filterlabel { color: var(--leise); font-size: .87rem; min-width: 5.5rem; }
.chip { display: inline-block; padding: .15rem .6rem; border: 1px solid var(--linie);
        border-radius: 1rem; color: var(--leise); text-decoration: none; font-size: .87rem; }
.chip:hover { border-color: var(--akzent); color: var(--tinte); }
.chip.aktiv { background: var(--akzent); border-color: var(--akzent); color: var(--papier); }
.tag { display: inline-block; margin-left: .35rem; padding: 0 .4rem; border-radius: 1rem;
       border: 1px solid var(--linie); font-size: .8rem; }

/* Preset-Karten */
.karten { list-style: none; padding: 0; display: grid; gap: 1rem;
          grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: .5rem;
         padding: 1.1rem; }
.karte a { color: inherit; text-decoration: none; display: block; }
.karte:hover:not(.ausgegraut) { border-color: var(--akzent); }
.karte.ausgegraut { opacity: .55; }

/* Formular */
.feld { display: flex; flex-direction: column; gap: .3rem; margin: 1.2rem 0; }
label { font-weight: 700; }
textarea, input[type="text"], input[type="email"], select {
  font: inherit; padding: .6rem; border: 1px solid var(--linie); border-radius: .4rem;
  background: var(--eingabe); color: var(--tinte); width: 100%;
}
textarea, input[type="text"], input[type="email"], select { transition: border-color .2s ease; }
textarea:focus, input[type="text"]:focus, input[type="email"]:focus, select:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 2px rgba(100, 255, 218, .15);
}
textarea { resize: vertical; }
button {
  font: inherit; font-weight: 500; padding: .6rem 1.1rem;
  border: 1px solid var(--akzent); border-radius: .4rem;
  background: var(--akzent); color: var(--papier); cursor: pointer;
  transition: background-color .2s ease;
}
button:hover:not(:disabled) { background: var(--akzent-warm); border-color: var(--akzent-warm); }
button:disabled { opacity: .5; cursor: not-allowed; }
.knopf { display: inline-block; font-weight: 500; padding: .6rem 1.1rem;
         border: 1px solid var(--akzent); border-radius: .4rem;
         background: var(--akzent); color: var(--papier); text-decoration: none; }
.knopf:hover { background: var(--akzent-warm); border-color: var(--akzent-warm); }
.knopf.leise { background: transparent; color: var(--akzent); }
.prompt-anpassen { margin: 1.5rem 0; padding: .6rem 0; border-top: 1px solid var(--linie); }
.freigabe label { font-weight: 400; display: flex; gap: .5rem; align-items: center; }

/* Budget */
.budget { margin: 1rem 0 1.5rem; max-width: 22rem; }
.budget-balken { height: .35rem; border-radius: .2rem; background: var(--linie); overflow: hidden; }
.budget-balken span { display: block; height: 100%; background: var(--akzent); }
.budget .meta { margin: .3rem 0 0; }

/* Warten */
.warten { padding: 2rem 0; }
.balken { height: .4rem; border-radius: .2rem; background: var(--linie); overflow: hidden;
          position: relative; margin: .8rem 0; }
.balken::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 35%;
  background: var(--akzent); animation: laufen 1.4s ease-in-out infinite;
}
@keyframes laufen { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .balken::after { animation: none; left: 0; width: 100%; } }

/* Duell */
.duell { display: grid; gap: 1.2rem; grid-template-columns: 1fr 1fr; margin: 1.5rem 0; }
@media (max-width: 900px) { .duell { grid-template-columns: 1fr; } }
.spalte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: .5rem;
          padding: 1rem; display: flex; flex-direction: column; }
/* Gleiche Höhe, Scroll in der Spalte: so wandern die Vote-Knöpfe nie weg. */
.antwort { white-space: pre-wrap; overflow-y: auto; max-height: 26rem; }
.kennzahlen { margin-top: .8rem; border-top: 1px solid var(--linie); width: 100%;
              font-size: .87rem; border-collapse: collapse; }
.kennzahlen th { text-align: left; font-weight: 400; color: var(--leise); padding: .2rem 0; }
.kennzahlen td { text-align: right; }

/* Vote */
.vote { display: flex; flex-wrap: wrap; gap: .6rem; position: sticky; bottom: 0;
        background: var(--papier); padding: .8rem 0; border-top: 1px solid var(--linie); }
.vote form { margin: 0; }
.danach { display: flex; gap: 1rem; align-items: center; }

.hinweis, .abgebrochen { background: var(--flaeche); border: 1px solid var(--warnung);
                         border-radius: .5rem; padding: 1rem; }

footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--linie);
         color: var(--leise); font-size: .87rem; }

/* Rangliste */
.rangliste { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.rangliste caption { text-align: left; padding-bottom: .4rem; }
.rangliste th, .rangliste td { padding: .5rem .4rem; border-bottom: 1px solid var(--linie);
                               text-align: left; vertical-align: top; }
.rangliste thead th { font-size: .87rem; color: var(--leise); font-weight: 400; }
.rangliste .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rangliste .platz { color: var(--leise); width: 2rem; }
.rangliste.duenn { opacity: .75; }
/* Intervallbalken: Bereich als Fläche, Punktschätzung als Strich */
.spanne { display: block; position: relative; height: .3rem; margin-top: .25rem;
          background: var(--linie); border-radius: .15rem; min-width: 7rem; }
.spanne .bereich { position: absolute; top: 0; bottom: 0; background: var(--akzent);
                   opacity: .45; border-radius: .15rem; }
.spanne .punkt { position: absolute; top: -.15rem; bottom: -.15rem; width: 2px;
                 background: var(--akzent); }
.export { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.hauptnavigation { display: flex; gap: 1rem; margin-top: .5rem; }
.hauptnavigation a { color: var(--leise); text-decoration: none; }
.hauptnavigation a:hover { color: var(--akzent); }
.meldung { background: var(--flaeche); border: 1px solid var(--akzent);
           border-radius: .5rem; padding: 1rem; }

/* Fließtext-Links: der Browser-Standard ist auf dunklem Grund kaum lesbar.
   Bewusst nur in Absätzen — Karten- und Navigationslinks erben ihre Farbe. */
main p a, main p a:visited,
.textseite a, .textseite a:visited,
footer a, footer a:visited { color: var(--akzent); }

/* Textseiten */
.textseite { max-width: 44rem; }
.textseite h2 { font-size: 1.3rem; margin: 2rem 0 .4rem; }
.textseite ul { padding-left: 1.2rem; }
.textseite li { margin: .35rem 0; }

/* Kopfzeile */
.anspann { margin: .5rem 0 0; max-width: 44rem; color: var(--leise); }

/* Login-Feld auf der Aufgabenseite. Eigene Fläche, damit es sich vom
   Aufgabenraster absetzt, ohne ihm die Aufmerksamkeit zu nehmen. */
.loginfeld { background: var(--flaeche); border: 1px solid var(--linie);
             border-radius: .6rem; padding: 1rem 1.1rem; margin: 1.5rem 0 0;
             box-shadow: 0 8px 32px rgba(0, 0, 0, .3); }
.loginfeld form { margin: 0; }
.loginfeld label { display: block; font-weight: 400; color: var(--leise); margin-bottom: .5rem; }
.loginfeld .meldung { margin: 0; border: 0; padding: 0; background: none; }
.loginzeile { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.loginzeile input { flex: 1 1 16rem; width: auto; }

.markenzeile { margin: 0; display: flex; gap: .5rem; align-items: baseline; }
.angemeldet { color: var(--akzent); font-size: 1.05rem; }
.hauptnavigation { align-items: baseline; }
.abmelden { margin: 0; }
/* Ein Knopf, der wie ein Navigationslink aussieht — Abmelden muss ein POST
   sein, soll aber nicht aus der Zeile herausspringen. */
.abmelden button { background: none; border: 0; padding: 0; color: var(--leise);
                   font: inherit; cursor: pointer; }
.abmelden button:hover { color: var(--akzent); }
.fusszeile { display: flex; gap: .5rem; flex-wrap: wrap; align-items: baseline; }
.version { color: var(--leise); }