/* Core Crew – Farben und Schrift wie the-core-club.de */
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --papier: #F6F2ED;
  --flaeche: #FFFFFF;
  --creme: #F2ECE4;
  --tinte: #1A1A1A;
  --tinte-2: #3A322E;
  --leise: rgba(26, 26, 26, .62);
  --linie: rgba(26, 26, 26, .12);
  --rot: #921717;
  --rot-dunkel: #761212;
  --rot-weich: #F3E3E3;
  --dunkel: #221A17;
  --gruen: #1F6E43;
  --gruen-weich: #EAF3EC;
  --taupe: #A48A7B;
  --r: 16px;
  --r-klein: 10px;
  --schatten: 0 1px 2px rgba(34, 26, 23, .05), 0 6px 20px rgba(34, 26, 23, .06);
  --tipp: 48px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 16px/1.5 "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h2 { font-size: 17px; }
p { margin: 0; }
a { color: var(--rot); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--rot) 45%, transparent); outline-offset: 2px; }

.seite {
  max-width: 520px; margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
}
.seite.schmal { max-width: 420px; padding-top: 48px; gap: 18px; }
.seite.mitte { text-align: center; align-items: center; }
.leise { color: var(--leise); }
.klein { font-size: 13px; }
.logo { display: block; width: 72px; height: 72px; }

/* Kopf */
.kopf { display: flex; align-items: center; gap: 12px; padding: 4px 0 6px; }
.kopf .logo { width: 44px; height: 44px; flex: none; }
.kopf .mitte { flex: 1; min-width: 0; }
.kopf .gruss { font-size: 20px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf .unter { font-size: 13px; color: var(--leise); }
.rund {
  flex: none; width: var(--tipp); height: var(--tipp); border-radius: 50%; border: 1px solid var(--linie);
  background: var(--flaeche); display: grid; place-items: center; padding: 0;
}
.rund svg { width: 22px; height: 22px; }

/* Karten */
.karte { background: var(--flaeche); border-radius: var(--r); box-shadow: var(--schatten); padding: 18px; }
.karte h2 { margin-bottom: 10px; }
.karte .titel { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: 8px; }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Wochenring */
.ring-karte { display: flex; align-items: center; gap: 18px; }
.ring { position: relative; flex: none; width: 112px; height: 112px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .bahn { fill: none; stroke: var(--creme); stroke-width: 12; }
.ring .voll { fill: none; stroke: var(--rot); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .6s cubic-bezier(.16, 1, .3, 1); }
.ring .zahl { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .zahl b { font-size: 30px; line-height: 1; }
.ring-text { min-width: 0; }
.ring-text .titel { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); margin-bottom: 6px; }
.ring-text .gross { font-size: 18px; font-weight: 700; line-height: 1.3; }
.ring-text .leise { margin-top: 4px; font-size: 14px; }
.ring-karte.fertig .ring .voll { stroke: var(--gruen); }

/* Kennzahlen */
.zahlwert { font-size: 34px; font-weight: 700; line-height: 1.05; }
.zahlwert small { font-size: 15px; font-weight: 600; color: var(--leise); margin-left: 4px; }
.streak-flamme { color: var(--rot); width: 22px; height: 22px; vertical-align: -3px; margin-right: 4px; }

/* Meilensteine */
.balken { height: 10px; border-radius: 99px; background: var(--creme); overflow: hidden; margin: 10px 0 8px; }
.balken > i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--rot); transition: width .6s cubic-bezier(.16, 1, .3, 1); }
.abzeichen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.abzeichen span {
  min-width: 38px; height: 30px; padding: 0 8px; border-radius: 99px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; background: var(--creme); color: var(--leise);
}
.abzeichen span.da { background: var(--rot); color: #fff; }

/* Nächste Classes */
.classes { list-style: none; margin: 0; padding: 0; }
.classes li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linie); }
.classes li:first-child { border-top: 0; padding-top: 2px; }
.classes .wann { flex: none; width: 76px; text-align: center; line-height: 1.15; }
.classes .wann b { display: block; font-size: 16px; }
.classes .wann span { font-size: 11px; white-space: nowrap; color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.classes .was { flex: 1; min-width: 0; }
.classes .was b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; }
.classes .frei { font-size: 13px; color: var(--leise); }
.classes .frei.knapp { color: var(--rot); font-weight: 600; }
.classes .frei.voll { color: var(--leise); }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tipp); padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--rot); color: #fff; font-weight: 600; text-decoration: none;
  transition: background .15s, transform .1s;
}
.knopf:hover { background: var(--rot-dunkel); }
.knopf:active { transform: scale(.98); }
.knopf.breit { width: 100%; }
.knopf.zweit { background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); }
.knopf.zweit:hover { background: var(--creme); }
.knopf.klein { min-height: 40px; padding: 0 16px; font-size: 14px; }
.knopf[disabled] { opacity: .55; cursor: default; }
.link-knopf { background: none; border: 0; padding: 10px 4px; color: var(--leise); font-size: 14px; text-decoration: underline; min-height: 44px; }
.link-knopf.gefahr { color: var(--rot); }

/* Formulare */
.feld { display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; }
.feld label, .feld .label { font-size: 14px; font-weight: 600; }
.eingabe {
  width: 100%; min-height: 52px; padding: 0 16px; border-radius: var(--r-klein); border: 1px solid var(--linie);
  background: var(--flaeche); font-size: 16px;
}
.eingabe:focus { border-color: var(--rot); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--rot) 18%, transparent); }
.formular { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.fehlertext { color: var(--rot); font-size: 14px; font-weight: 500; }

.schalter-zeile { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--linie); text-align: left; }
.schalter-zeile:first-child { border-top: 0; }
.schalter-zeile .text { flex: 1; min-width: 0; }
.schalter-zeile .text b { display: block; font-weight: 600; font-size: 15px; }
.schalter-zeile .text span { font-size: 13px; color: var(--leise); }
.schalter { appearance: none; flex: none; width: 52px; height: 32px; border-radius: 99px; background: var(--creme); position: relative; cursor: pointer; transition: background .15s; margin: 0; border: 1px solid var(--linie); }
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.schalter:checked { background: var(--rot); border-color: var(--rot); }
.schalter:checked::after { transform: translateX(20px); }

.haken-zeile { display: flex; gap: 12px; align-items: flex-start; text-align: left; font-size: 14px; cursor: pointer; }
.haken-zeile input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--rot); }

.wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wahl button {
  min-height: var(--tipp); border-radius: var(--r-klein); border: 1px solid var(--linie); background: var(--flaeche); font-weight: 600;
}
.wahl button.an { background: var(--rot); border-color: var(--rot); color: #fff; }

.abstand-oben { margin-top: 10px; }
.liste-punkte { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 15px; }

/* Sprache */
.sprache { display: inline-flex; border: 1px solid var(--linie); border-radius: 99px; overflow: hidden; background: var(--flaeche); }
.sprache button { border: 0; background: none; min-width: 48px; min-height: 40px; font-size: 13px; font-weight: 700; color: var(--leise); }
.sprache button.an { background: var(--tinte); color: #fff; }
.oben-rechts { align-self: flex-end; }

/* Dialog im App-Design (keine Browser-Dialoge) */
.schleier { position: fixed; inset: 0; background: rgba(34, 26, 23, .45); display: grid; place-items: end center; padding: 16px; z-index: 20; animation: ein .15s; }
.dialog { width: 100%; max-width: 440px; background: var(--flaeche); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.dialog .knoepfe { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
@media (min-width: 600px) { .schleier { place-items: center; } }
@keyframes ein { from { opacity: 0; } }

.hinweis {
  position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: calc(100% - 32px); background: var(--dunkel); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; z-index: 30;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.laden { width: 36px; height: 36px; margin: 30vh auto; border-radius: 50%; border: 3px solid var(--creme); border-top-color: var(--rot); animation: dreh 1s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }
.fuss { text-align: center; font-size: 12px; color: var(--leise); margin-top: 6px; }

@media (min-width: 900px) {
  .seite { max-width: 560px; padding-top: 36px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Team + Rangliste */
.team-karte { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.team-karte:active { transform: scale(.99); }
.team-karte .team-text { flex: 1; min-width: 0; }
.team-karte h2 { font-size: 20px; margin-bottom: 4px; }
.team-karte .gross { font-weight: 600; }
.team-karte .pfeil { flex: none; width: 24px; height: 24px; color: var(--leise); }
.team-karte .pfeil svg { width: 24px; height: 24px; }
.rang { list-style: none; margin: 12px 0 0; padding: 0; }
.rang li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linie); }
.rang li:first-child { border-top: 0; }
.rang li.meins { background: var(--rot-weich); border-radius: 12px; padding: 12px 10px; margin: 0 -10px; border-top-color: transparent; }
.rang li.meins + li { border-top-color: transparent; }
.rang li.ruhig { opacity: .62; }
.rang li.leer { display: block; }
.rang .platz { width: 34px; height: 34px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.rang li.meins .platz { background: var(--rot); color: #fff; }
.rang .rang-mitte { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rang .rang-mitte b { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.rang .rang-meta { font-size: 13px; color: var(--leise); }
.rang em { font-style: normal; font-size: 11px; font-weight: 700; background: var(--rot); color: #fff; padding: 2px 8px; border-radius: 99px; margin-left: 6px; vertical-align: 1px; }
.rang .rang-wert { font-size: 20px; font-weight: 700; text-align: right; white-space: nowrap; }
.rang .rang-wert small { font-size: 12px; font-weight: 600; color: var(--leise); }
.klein-balken { height: 6px; margin: 6px 0 0; }
.einzel-hinweis { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.einzel-hinweis p { flex: 1; min-width: 120px; }