/* Trainingstracker - Dark, hoher Kontrast, grosse Trefferflaechen.
   Keine Buildchain: reines CSS mit Custom Properties.
   Designentscheidung: dauerhaft dunkel. Die App wird abends in der Halle und
   morgens nach dem Lauf benutzt, nicht am Schreibtisch - und ein dunkles UI
   braucht kein Theme-Toggle, das man mit nassen Fingern trifft. */

:root {
  --bg: #08090d;
  --bg-elev: #12141c;
  --bg-elev-2: #1a1d27;
  --line: #262a36;
  --fg: #f2f4f8;
  --fg-dim: #9aa2b4;
  /* 19.09.2026: von #6b7386 aufgehellt - axe meldete Kontrast unter 4,5:1
     auf dem schwarzen Hintergrund (Abschnittstitel, Hilfstexte). */
  --fg-mute: #8b95ab;
  --accent: #7c5cff;
  --accent-2: #00d3c7;
  /* Logo (27.09.2026): Rohfarben der beiden Themenfarben, gesetzt von
     core.js themaAnwenden. Der Rand ist Farbe 1, abgedunkelt. */
  --logo-kroko: var(--accent);
  --logo-grund: var(--accent-2);
  --danger: #ff4d6a;
  --ok: #38d996;
  /* Abstaende (27.09.2026): drei Werte statt vorher elf (0 bis 36 px).
     klein = Ueberschrift zu ihrem Inhalt, normal = zwischen Bloecken,
     gross = vor einer neuen Abschnittsueberschrift. */
  --abstand-klein: 8px;
  --abstand: 12px;
  --abstand-gross: 28px;
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --tap: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg); color: var(--fg);
  font-family: var(--font);
  font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body::before {
  /* Atmosphäre statt Deko: zwei weiche Farbwolken hinter allem. */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 40vh at 15% -5%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(50vw 35vh at 95% 5%, rgba(0, 211, 199, .14), transparent 70%);
}

h1, h2, h3 { margin: 0; letter-spacing: -.02em; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

.muted { color: var(--fg-dim); }
.mute2 { color: var(--fg-mute); }
[hidden] { display: none !important; }

/* ---------- Grundgeruest ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  /* Auf breiten Schirmen sitzt der Inhalt in einer 720-px-Spalte in der Mitte.
     Ohne dasselbe Polster klebte die Marke ganz links am Rand, waehrend die
     Karten weit rechts anfingen - das sah aus, als liefe das Layout aus dem
     Ruder. Der Prozentwert bezieht sich auf die Body-Breite. */
  padding: 14px max(18px, calc((100% - 720px) / 2 + 16px)) 12px;
  background: linear-gradient(180deg, rgba(8,9,13,.95), rgba(8,9,13,.65) 70%, transparent);
  backdrop-filter: blur(14px);
}
.topbar__brand { display: flex; align-items: center; gap: 10px; }
.brand__mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size: 16px;
}
/* Zugleich die <h1> der Seite - der Router schreibt den Namen der Ansicht hinein. */
.brand__text { font-weight: 800; font-size: 19px; letter-spacing: -.02em; margin: 0; }

.iconbtn {
  width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--line);
  background: var(--bg-elev); display: grid; place-items: center; font-size: 17px;
  cursor: pointer; transition: transform .12s, background .15s;
}
.iconbtn:active { transform: scale(.92); background: var(--bg-elev-2); }

.view {
  padding: 4px 16px calc(96px + var(--safe-b));
  max-width: 720px; margin: 0 auto;
  animation: fade .22s ease both;
}
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  /* Vier Tabs, mit wger fuenf: so viele Spalten wie sichtbare Eintraege. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 2px;
  padding: 8px max(10px, calc((100% - 720px) / 2)) calc(8px + var(--safe-b));
  background: rgba(12,14,20,.82); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
}
.tabbar a {
  display: grid; justify-items: center; gap: 3px;
  padding: 8px 2px; border-radius: 14px; min-height: var(--tap);
  font-size: 10.5px; font-weight: 600; color: var(--fg-mute);
  transition: color .15s, background .15s;
}
.tabbar a .tab__ico { font-size: 19px; line-height: 1; }
.tabbar a.is-active { color: var(--fg); background: var(--bg-elev); }
.tabbar a:active { background: var(--bg-elev-2); }

/* ---------- Bausteine ---------- */

.card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px;
}
.section-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: var(--abstand-gross) 2px var(--abstand-klein); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute);
}
.section-title > span:first-child { white-space: nowrap; }
/* Der rechte Teil ist ein Zusatz ("lange drücken = gestern", "6,0 h"). In
   Versalien mit Sperrung brauchte er bei 360 px mehr Platz als die Zeile hat
   und warf beide Haelften in je zwei Zeilen - genau das "Ausbrechen in der
   Breite" vom 20.09.2026. Als normaler Kleintext passt er. */
.section-title > span:last-child:not(:only-child) {
  text-transform: none; letter-spacing: .01em; font-weight: 600; font-size: 12.5px;
  text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.btn {
  border: 1px solid var(--line); background: var(--bg-elev);
  border-radius: var(--r-md); padding: 0 18px; min-height: 50px;
  font-weight: 700; cursor: pointer; transition: transform .1s, filter .15s;
}
.btn:active { transform: scale(.97); }
/* Ein <a class="btn"> ist von Haus aus inline - sein Text klebte oben, sobald
   der Knopf hoeher wurde als eine Zeile ("Fertig" im Routine-Editor,
   27.09.2026). Wie ein <button> zentrieren. */
a.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; }
a.btn.btn--block { display: flex; }
.btn--primary { border: none; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, #000)); color: #fff; }
.btn--ghost { background: transparent; }
.btn--danger { border-color: rgba(255,77,106,.35); color: var(--danger); background: rgba(255,77,106,.08); }
.btn--block { width: 100%; }
.btn--sm { min-height: 42px; padding: 0 14px; font-size: 14px; border-radius: var(--r-sm); }

.field {
  width: 100%; min-height: 52px; padding: 0 14px;
  background: var(--bg-elev-2); border: 1px solid var(--line);
  border-radius: var(--r-md); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea.field { padding: 14px; min-height: 86px; resize: vertical; line-height: 1.5; }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field::placeholder { color: var(--fg-mute); }
label.lbl { display: block; font-size: 12px; font-weight: 700; color: var(--fg-dim); margin: 0 0 6px 3px; letter-spacing: .04em; }
.row { display: grid; gap: 12px; }
.row--2 { grid-template-columns: 1fr 1fr; }
/* Grid-Kinder bekommen von Haus aus min-width:auto - ein <input type="date">
   ist damit breiter als seine Spalte und sprengt die Karte. */
/* Rasterkinder bekommen von Haus aus min-width:auto und koennen dann nicht
   unter ihre Mindestbreite schrumpfen - Listeneintraege mit langen Zeilen
   (z. B. die Sportart-Zuordnung) sprengen sonst die Spalte. */
.row > *, .card > *, form > *, .list > *, .rank > * { min-width: 0; }
.item { overflow: hidden; }
.field, select.field, textarea.field { max-width: 100%; }

/* ---------- Quick-Add ---------- */

.quick { display: grid; gap: 10px; margin-top: 8px; }
.quick__btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  min-height: 76px; padding: 0 18px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--c) 26%, transparent), transparent 62%),
    var(--bg-elev);
  cursor: pointer; transition: transform .12s ease, box-shadow .2s;
  box-shadow: 0 10px 30px -18px var(--c);
}
.quick__btn:active { transform: scale(.975); }
.quick__btn::after {
  content: ""; position: absolute; right: -30px; top: -60px;
  width: 140px; height: 140px; border-radius: 50%;
  background: var(--c); filter: blur(46px); opacity: .32;
}
.quick__ico {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 15px; font-size: 24px;
  background: color-mix(in srgb, var(--c) 22%, var(--bg-elev-2));
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
}
.quick__txt { display: grid; gap: 2px; z-index: 1; }
.quick__name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.quick__meta { font-size: 13px; color: var(--fg-dim); }
.quick__go { margin-left: auto; z-index: 1; font-size: 22px; color: var(--c); font-weight: 800; }

.quick__btn.is-done { animation: pop .45s ease; }
@keyframes pop {
  30% { transform: scale(1.03); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 55%, transparent); }
}

/* ---------- Listen ---------- */

.list { display: grid; gap: 10px; }
.item {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: var(--bg-elev); border: 1px solid var(--line);
  cursor: pointer; transition: background .15s, transform .1s;
}
.item:active { transform: scale(.99); background: var(--bg-elev-2); }
.item__dot {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center; font-size: 20px;
  background: color-mix(in srgb, var(--c) 20%, var(--bg-elev-2));
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
}
.item__main { min-width: 0; flex: 1; }
.item__t { font-weight: 700; letter-spacing: -.01em; }
.item__s { font-size: 13px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item__r { font-size: 13px; color: var(--fg-mute); font-variant-numeric: tabular-nums; text-align: right; }
.item.is-pending { border-style: dashed; border-color: color-mix(in srgb, var(--accent-2) 45%, var(--line)); }

.daygroup { margin-top: 20px; }
.daygroup__h {
  position: sticky; top: 58px; z-index: 5;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 4px; margin-bottom: 8px;
  background: rgba(8,9,13,.9); backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute);
}

/* ---------- Filter-Chips ---------- */

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
/* Filterreihen laufen bis an den Bildschirmrand statt an der Textspalte
   abgeschnitten zu werden: ein halb sichtbarer Chip am Rand heisst "hier geht
   es weiter", einer, der an einer unsichtbaren Kante endet, sieht kaputt aus. */
/* Nur, solange die Inhaltsspalte wirklich bis an den Rand geht (720 + 2x16). */
@media (max-width: 752px) {
  .view > .page > .chips { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
}
/* Tags und Textbausteine werden umbrochen statt geschoben - man will sie alle
   sehen, nicht durch sie wischen. */
.chips--wrap { flex-wrap: wrap; overflow: visible; }
.chip {
  /* inline-flex: ein <button> zentriert seinen Text von selbst, ein <span>
     nicht - im Rueckblick klebte der Text deshalb oben (27.09.2026). */
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  flex: 0 0 auto; min-height: 40px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg-elev);
  font-size: 14px; font-weight: 600; color: var(--fg-dim); cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.chip.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--c, var(--accent)), color-mix(in srgb, var(--c, var(--accent)) 55%, #000));
}

/* ---------- Statistik ---------- */

.hero {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 22px; margin-top: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 32%, transparent), color-mix(in srgb, var(--accent-2) 16%, transparent)), var(--bg-elev);
  border: 1px solid var(--line);
}
.hero__k { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.hero__v { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.hero__s { margin-top: 6px; color: var(--fg-dim); font-size: 14px; }

.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.stat {
  padding: 12px 8px; border-radius: var(--r-md); text-align: center;
  background: var(--bg-elev); border: 1px solid var(--line); cursor: pointer;
  transition: all .15s;
}
.stat.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--bg-elev)); }
.stat__v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat__k { font-size: 11px; color: var(--fg-mute); font-weight: 600; }

.bars { display: grid; gap: 14px; margin-top: 6px; }
.bar__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.bar__name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.bar__val { font-variant-numeric: tabular-nums; font-weight: 800; }
.bar__track { height: 12px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; }
.bar__fill {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #fff));
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}

/* ---------- Sheet (Bearbeiten) ---------- */

.sheet { position: fixed; inset: 0; z-index: 50; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); animation: fade .2s; }
.sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88vh; overflow-y: auto;
  padding: 10px 16px calc(24px + var(--safe-b));
  background: var(--bg-elev); border-radius: 26px 26px 0 0;
  border-top: 1px solid var(--line);
  animation: up .26s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes up { from { transform: translateY(100%); } }
.sheet__grab { width: 42px; height: 4px; border-radius: 99px; background: var(--line); margin: 4px auto 16px; }

/* ---------- Toast / Undo ---------- */

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(86px + var(--safe-b)); z-index: 60;
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 28px);
  padding: 13px 14px 13px 18px; border-radius: 999px;
  background: #22263a; border: 1px solid #343a54;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,.85);
  font-size: 14px; font-weight: 600;
  animation: toastin .28s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 14px); } }
.toast.is-err { background: #3a1f28; border-color: #6b2b3c; }
.toast__action {
  border: none; background: var(--accent); color: #fff;
  border-radius: 999px; min-height: 36px; padding: 0 16px;
  font-weight: 800; cursor: pointer;
}

/* ---------- Login ---------- */

.login { min-height: 100dvh; display: grid; place-items: center; padding: 22px; }
.login__box { width: 100%; max-width: 380px; display: grid; gap: 12px; }
.login__logo {
  width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center;
  font-size: 30px; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  margin-bottom: 6px;
}
.login__box h1 { font-size: 34px; letter-spacing: -.035em; }
.login__box .muted { margin-bottom: 10px; }
.login__error { color: var(--danger); font-weight: 600; font-size: 14px; }

/* ---------- Leerzustand ---------- */

.empty { text-align: center; padding: 48px 20px; color: var(--fg-mute); }
.empty__ico { font-size: 40px; opacity: .55; margin-bottom: 10px; }

.skel { border-radius: var(--r-md); background: linear-gradient(90deg, var(--bg-elev), var(--bg-elev-2), var(--bg-elev)); background-size: 200% 100%; animation: sh 1.2s linear infinite; height: 68px; }
@keyframes sh { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (min-width: 640px) {
  .quick { grid-template-columns: repeat(3, 1fr); }
  .quick__btn { flex-direction: column; align-items: flex-start; justify-content: center; padding: 20px; min-height: 148px; }
  .quick__go { margin-left: 0; position: absolute; right: 18px; top: 16px; }
}

/* ---------- Serie (Streak) ---------- */

.streak {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r-lg); margin-top: 8px;
  background: linear-gradient(135deg, rgba(255,122,69,.20), rgba(255,77,106,.08) 70%), var(--bg-elev);
  border: 1px solid color-mix(in srgb, #ff7a45 35%, var(--line));
}
.streak__flame { font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 14px rgba(255,122,69,.55)); }
.streak__main { flex: 1; min-width: 0; }
.streak__v { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.streak__s { font-size: 13px; color: var(--fg-dim); }
.streak__best { text-align: right; font-size: 12px; color: var(--fg-mute); font-weight: 600; }
.streak__best b { display: block; font-size: 18px; color: var(--fg); font-variant-numeric: tabular-nums; }
.streak.is-risk {
  background: linear-gradient(135deg, rgba(255,77,106,.30), rgba(255,77,106,.10) 70%), var(--bg-elev);
  border-color: rgba(255,77,106,.6);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(255,77,106,.18); } }
.streak.is-none { background: var(--bg-elev); border-color: var(--line); }
.streak.is-none .streak__flame { filter: grayscale(1); opacity: .45; }

/* ---------- Heatmap ---------- */

.heat { padding: 14px 12px 12px; }
.heat__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; }
.heat__sum { font-weight: 800; letter-spacing: -.01em; }
.heat__sum span { color: var(--fg-dim); font-weight: 600; font-size: 13px; }
.heat__wrap { display: flex; gap: 6px; }
.heat__wd {
  display: grid; grid-template-rows: 16px repeat(7, var(--cell)); row-gap: var(--gap);
  font-size: 10px; color: var(--fg-mute); font-weight: 600; line-height: var(--cell);
}
.heat__scroll { overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; -webkit-overflow-scrolling: touch;
  padding-right: 3px; }
.heat__scroll::-webkit-scrollbar { display: none; }
.heat__months { position: relative; height: 16px; font-size: 10px; color: var(--fg-mute); font-weight: 600; }
.heat__months span { position: absolute; top: 0; white-space: nowrap; }
.heat__grid {
  display: grid; grid-template-rows: repeat(7, var(--cell)); grid-auto-flow: column;
  grid-auto-columns: var(--cell); gap: var(--gap); width: max-content;
}
.heat, .heat * { --cell: 15px; --gap: 3px; }
.heat__c { border-radius: 4px; background: var(--bg-elev-2); cursor: pointer; }
.heat__c.l1 { background: color-mix(in srgb, var(--c) 50%, var(--bg-elev-2)); }
.heat__c.l2 { background: color-mix(in srgb, var(--c) 78%, var(--bg-elev-2)); }
.heat__c.l3 { background: var(--c); box-shadow: 0 0 8px -2px var(--c); }
.heat__c.is-future { background: transparent; cursor: default; }
.heat__c.is-today { outline: 2px solid var(--fg-dim); outline-offset: 1px; }
.heat__c.is-sel { outline: 2px solid var(--fg); outline-offset: 1px; }
.heat__detail { min-height: 40px; margin: 12px 4px 0; font-size: 14px; color: var(--fg-dim); }
.heat__detail b { color: var(--fg); }
.heat__legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.heat__legend .chip { min-height: 40px; font-size: 13px; padding: 0 12px; }

/* ---------- Vergleich ---------- */

.rank { display: grid; gap: 10px; margin-top: 4px; }
.rank__row {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--bg-elev); border: 1px solid var(--line);
}
.rank__row.is-me { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-elev)); }
.rank__pos {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; font-size: 16px; background: var(--bg-elev-2); font-variant-numeric: tabular-nums;
}
.rank__row:nth-child(1) .rank__pos { background: linear-gradient(135deg, #ffd166, #f3a712); color: #2a1d00; }
.rank__row:nth-child(2) .rank__pos { background: linear-gradient(135deg, #e3e7ef, #aab2c2); color: #1c2230; }
.rank__row:nth-child(3) .rank__pos { background: linear-gradient(135deg, #e7a473, #b8663a); color: #2a1406; }
.rank__name { font-weight: 800; letter-spacing: -.01em; }
.rank__meta { font-size: 12.5px; color: var(--fg-dim); margin-top: 2px; }
.rank__pts { text-align: right; font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1; }
.rank__pts small { display: block; font-size: 11px; color: var(--fg-mute); font-weight: 600; letter-spacing: 0; margin-top: 3px; }
.rank__mix { grid-column: 2 / 4; display: flex; height: 6px; border-radius: 99px; overflow: hidden; background: var(--bg-elev-2); }
.rank__mix span { height: 100%; }
.rules { font-size: 13px; color: var(--fg-dim); line-height: 1.55; }
.rules b { color: var(--fg); }
.rules ul { margin: 6px 0 0; padding-left: 18px; }
.badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px; background: rgba(255,209,102,.16); color: #ffd166; border: 1px solid rgba(255,209,102,.35); }
.streak.is-pause {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) 18%, transparent), color-mix(in srgb, var(--accent-2) 6%, transparent) 70%), var(--bg-elev);
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
}
.streak.is-pause .streak__flame { filter: none; }

/* Nur fuer Screenreader: die Seitenueberschrift. Sichtbar steht sie in der
   Kopfzeile, aber als <span> - axe bemaengelte zu Recht die fehlende h1. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Wochenziel-Ring ---------- */

.goal { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-top: 8px;
  border-radius: var(--r-lg); background: var(--bg-elev); border: 1px solid var(--line); }
.goal__ring { flex: 0 0 auto; width: 56px; height: 56px; transform: rotate(-90deg); }
.goal__ring circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.goal__bg { stroke: var(--bg-elev-2); }
.goal__fg { stroke: url(#goalgrad); transition: stroke-dasharray .7s cubic-bezier(.2,.8,.2,1); }
.goal__txt { flex: 1; min-width: 0; }
/* Beide als Block: als Inline-Spans liefen Wert und Hinweis bei schmalen
   Schirmen in einer Zeile ineinander ("... diese Woche Alles Weitere ..."). */
.goal__v { display: block; font-weight: 800; letter-spacing: -.01em; }
.goal__s { display: block; font-size: 13px; color: var(--fg-dim); }
.goal.is-done { border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  background: linear-gradient(135deg, rgba(56,217,150,.16), transparent 70%), var(--bg-elev); }

/* ---------- Treppchen ---------- */

.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 8px; margin: 6px 0 14px; }
.podium__p { display: grid; justify-items: center; gap: 6px; }
.podium__av { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center;
  font-weight: 800; font-size: 18px; color: #fff; }
.podium__n { font-size: 12.5px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__v { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.podium__bar { width: 100%; border-radius: 12px 12px 0 0; background: var(--bg-elev-2); border: 1px solid var(--line); border-bottom: none;
  display: grid; place-items: start center; padding-top: 6px; font-size: 18px; font-weight: 800; }
.podium__p:nth-child(1) .podium__bar { height: 46px; background: linear-gradient(180deg, rgba(255,209,102,.30), var(--bg-elev-2)); }
.podium__p:nth-child(2) .podium__bar { height: 62px; background: linear-gradient(180deg, rgba(255,209,102,.45), var(--bg-elev-2)); }
.podium__p:nth-child(3) .podium__bar { height: 34px; background: linear-gradient(180deg, rgba(231,164,115,.30), var(--bg-elev-2)); }

.rank__av { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 15px; }

/* ---------- Tags ----------
   Etiketten an einer Einheit. Bewusst schmaler und ruhiger als die
   Filter-Chips: sie sind Beiwerk zur Sportart, nicht die Navigation. */

.chip--tag { min-height: 38px; font-size: 13.5px; padding: 0 13px; }
.chip--tag.is-active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 55%, #000));
}
.chip--new { min-height: 38px; width: 42px; padding: 0; font-size: 19px; font-weight: 800; color: var(--fg-dim); }
.chip--input { min-height: 38px; padding: 0 13px; background: var(--bg-elev-2); width: 160px; max-width: 100%; }
.chip.is-off { opacity: .45; text-decoration: line-through; }
.chip__x { border: none; background: none; color: inherit; font-size: 16px; font-weight: 800;
  margin: 0 -6px 0 4px; padding: 0 6px; cursor: pointer; opacity: .6; }
.chip__x:hover { opacity: 1; }

/* Umbrechen, nicht abschneiden: in der Listenzeile bleibt neben Dauer und
   Symbol wenig Platz, und ein halb abgesaebeltes Etikett sieht aus wie ein
   Fehler. */
.tagrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tagpill {
  flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent-2) 14%, var(--bg-elev-2));
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
  color: color-mix(in srgb, var(--accent-2) 75%, #fff);
}

/* ---------- Hilfe ----------
   Aufklappbar ueber <details>: kein Skript, kein Zustand, und die
   Tastaturbedienung bringt der Browser mit. */

.faq {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md); margin-bottom: 8px; overflow: hidden;
}
.faq > summary {
  list-style: none; cursor: pointer; padding: 14px 16px;
  min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 700; letter-spacing: -.01em;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: "›"; color: var(--fg-mute); font-size: 20px; transition: transform .18s; }
.faq[open] > summary::after { transform: rotate(90deg); }
.faq > summary:active { background: var(--bg-elev-2); }
.faq__b { padding: 0 16px 15px; color: var(--fg-dim); font-size: 14px; line-height: 1.55; }
.faq__b p + p { margin-top: 9px; }
.faq__b b { color: var(--fg); }
.faq__b ul { margin: 0; padding-left: 20px; }
.faq__b li { margin-bottom: 3px; }

/* ---------- Anleitung in Schritten ---------- */

.steps { margin: 0; padding-left: 0; list-style: none; counter-reset: schritt;
  display: grid; gap: 9px; font-size: 14px; color: var(--fg-dim); line-height: 1.5; }
/* Der Text steckt in einem <span>: in einem Raster wird sonst *jedes*
   Kindelement zur eigenen Zelle - ein <b> mitten im Satz rutschte in die
   naechste Zeile. */
.steps li { counter-increment: schritt; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.steps li > span { min-width: 0; }
.steps li::before {
  content: counter(schritt); width: 26px; height: 26px; border-radius: 9px;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 800; color: var(--fg);
  background: color-mix(in srgb, var(--accent) 24%, var(--bg-elev-2));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.steps b { color: var(--fg); }

/* ---------- Icons ----------
   Strich-Icons aus icons.js. Sie erben die Schriftfarbe ihrer Umgebung -
   in einer Kachel also die Sportartenfarbe, in der Leiste das Grau der
   inaktiven Tabs. */

.ico { display: block; flex: 0 0 auto; }
.ico--inline { display: inline-block; vertical-align: -2px; }
/* Chips mit Symbol davor: das Icon soll mit der Grundlinie laufen. */
.chip--ico { display: inline-flex; align-items: center; gap: 7px; }
.chip--sym { width: 48px; padding: 0; display: grid; place-items: center; }
.item__dot .ico, .quick__ico .ico { color: var(--c, var(--accent)); }
.tab__ico { display: grid; place-items: center; }
.brand__mark { color: #fff; padding: 6px; }
.login__logo { padding: 13px; color: #fff; }
.empty__ico { display: grid; place-items: center; color: var(--fg-mute); }
.empty__ico .ico { opacity: .9; }
.streak__flame { display: grid; place-items: center; color: #ff8a52; filter: drop-shadow(0 4px 14px rgba(255,122,69,.45)); }
.streak.is-pause .streak__flame { color: var(--accent-2); }
.streak.is-none .streak__flame { color: var(--fg-mute); filter: none; opacity: .6; }
.podium__bar { color: var(--fg); font-variant-numeric: tabular-nums; }

/* ---------- Geplant (Vorplanung) ----------
   Martin, 20.09.2026: "Dieses ganz blass vorprogrammiert". Ein Termin, der
   noch nicht stattgefunden hat, darf nicht aussehen wie einer, der zaehlt -
   sonst liest man die Woche falsch. Gestrichelt und halbtransparent: da,
   aber offensichtlich noch nichts wert. */

.item.is-geplant {
  opacity: .52;
  border-style: dashed;
  background: transparent;
}
.item.is-geplant .item__dot { background: transparent; }
.item.is-geplant:active { opacity: .8; background: var(--bg-elev); }

/* ---------- Erfolge ----------
   Erreichtes leuchtet, Offenes steht blass daneben, Verstecktes bleibt
   verschlossen. Der Fortschrittsbalken ist der Punkt der Seite: "18 von 25"
   zieht weiter als ein graues Kaestchen. */

.ach__kopf { display: grid; gap: 10px; margin-top: 8px; }
.ach__zahl { font-size: 42px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; }
.ach__zahl span { font-size: 20px; color: var(--fg-mute); font-weight: 700; }
.ach__balken { height: 8px; border-radius: 99px; background: var(--bg-elev-2); overflow: hidden; }
.ach__balken span { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .6s cubic-bezier(.2,.8,.2,1); }
.ach__balken--klein { height: 5px; margin-top: 7px; max-width: 220px; }

.ach { cursor: default; }
.ach .item__dot { color: var(--fg-mute); }
/* Offene Erfolge sind zurueckgenommen, aber nicht ausgegraut: `opacity` auf
   der ganzen Zeile hat den Text unter die Kontrastschwelle gedrueckt (axe,
   109 Verstoesse). Gedimmt wird deshalb das Symbol, der Text bekommt die
   gedaempfte Schriftfarbe - die haelt 4,5:1. */
.ach:not(.is-erreicht) .item__dot { opacity: .5; }
.ach:not(.is-erreicht) .item__t { color: var(--fg-dim); font-weight: 600; }
.ach.is-erreicht { border-color: color-mix(in srgb, #ffd166 40%, var(--line));
  background: linear-gradient(135deg, rgba(255,209,102,.10), transparent 60%), var(--bg-elev); }
.ach.is-erreicht .item__dot { color: #ffd166;
  background: color-mix(in srgb, #ffd166 16%, var(--bg-elev-2));
  border-color: color-mix(in srgb, #ffd166 34%, transparent); }
.ach__datum { font-size: 12px; color: #ffd166; font-weight: 700; }
.ach--geheim { border-style: dashed; }
.ach--geheim .item__t { letter-spacing: .18em; color: var(--fg-dim); }
.ach__geheimnetz { display: flex; flex-wrap: wrap; gap: 8px; }
.ach__geheimnetz span { display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; color: var(--fg-mute);
  background: var(--bg-elev-2); border: 1px dashed var(--line); }

/* Tag-Chip im Typ-Editor: Name antippbar, Zuschlag sichtbar */
.chip__name { border: none; background: none; color: inherit; font: inherit; cursor: pointer;
  padding: 0; }
.chip__bonus { color: #ffd166; font-weight: 800; }

/* Messwert-Kacheln: so viele nebeneinander, wie passen (die Statistik-Leiste
   darueber hat feste vier Spalten, hier sind es je nach Sportart zwei bis vier). */
.statgrid--auto { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }

/* ---------- Wischen im Verlauf ----------
   Die Zeile liegt auf einer Unterlage, die zeigt, was passiert: links rot
   (loeschen), rechts blau (Typ wechseln). Erst wenn weit genug gewischt ist,
   leuchtet sie - so weiss man vor dem Loslassen, ob es ausloest. */

.swipe { position: relative; border-radius: var(--r-md); overflow: hidden; }
.swipe__unterlage {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 18px;
  color: var(--fg-mute); font-size: 13px; font-weight: 700;
}
.swipe__links, .swipe__rechts { display: flex; align-items: center; gap: 7px; }
.swipe > .item { position: relative; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.swipe > .item.is-swiping { transition: none; }
.swipe:has(> .item[data-swipe="links"]) .swipe__unterlage { background: rgba(255,77,106,.16); }
.swipe:has(> .item[data-swipe="rechts"]) .swipe__unterlage { background: rgba(77,171,255,.16); }
.swipe:has(> .item.is-armed[data-swipe="links"]) .swipe__links { color: var(--danger); }
.swipe:has(> .item.is-armed[data-swipe="rechts"]) .swipe__rechts { color: #4dabff; }

/* ---------- Rückblick ---------- */

.rb__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 2px; }
.rb__titel { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.iconbtn[disabled] { opacity: .3; pointer-events: none; }
.rb__vergleich { margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--fg-dim); }
.rb__plus { color: var(--ok); }
.rb__minus { color: #ffb4a2; }

.rb__woche { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; }
.rb__wtag { display: grid; justify-items: center; gap: 4px; }
.rb__saeule { width: 100%; height: 76px; display: flex; align-items: flex-end;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rb__saeule span { display: block; width: 100%; border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2)); min-height: 3px;
  transition: height .5s cubic-bezier(.2,.8,.2,1); }
.rb__wzahl { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; min-height: 15px; }
.rb__wname { font-size: 11px; color: var(--fg-mute); font-weight: 600; }

/* ---------- Tag-Auswahl in Gruppen ----------
   Exklusive Gruppen (Trainingsart, Spielform) stehen mit Namen darueber,
   damit klar ist, warum ein zweiter Tipp das erste Etikett abwaehlt. */

.tagpicker { display: grid; gap: 10px; }
.tagpicker__gruppe { display: grid; gap: 4px; }
.tagpicker__name { font-size: 12px; font-weight: 700; color: var(--fg-dim); margin-left: 3px; }
/* Exklusive Gruppe = Umschalter: Chips in einer gemeinsamen Schiene, eckiger.
   Erklaert wird das nirgends - man sieht, dass es zusammengehoert. */
.tagpicker__gruppe--eins > .chips {
  gap: 4px; padding: 4px; border-radius: 16px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  justify-self: start; max-width: 100%;
}
.tagpicker__gruppe--eins > .chips > .chip { border-radius: 12px; border-color: transparent; }
.tempozeile { margin: 6px 3px 0; font-weight: 700; color: var(--accent-2); }
.gruppe__knopf { border: none; background: none; color: inherit; font: inherit; padding: 0;
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }

/* ---------- Punktesystem (v3) ---------- */
.card--warn { border-color: rgba(255,77,106,.4); background: rgba(255,77,106,.07); }
.card--warn .item__t { color: var(--danger); display: flex; align-items: center; gap: 6px; }
.ps__fehler { margin: 6px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.45; }
.ps__fehler li { overflow-wrap: anywhere; }
.ps__modul { display: grid; gap: 6px; margin-bottom: 10px; }
.ps__schalter { display: flex; align-items: center; gap: 10px; font-weight: 700; cursor: pointer; }
.ps__felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.ps__felder > * { min-width: 0; }
.ps__zahl { display: grid; gap: 3px; font-size: 12px; color: var(--fg-dim); font-weight: 600; }
.ps__stufen { grid-column: 1 / -1; display: grid; gap: 8px; }
.ps__stufe { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.ps__sportart { margin-bottom: 10px; }
.ps__sportart > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.ps__sportart > summary::-webkit-details-marker { display: none; }
.ps__sportart[open] > summary { margin-bottom: 10px; }
.ps__sname { font-weight: 700; flex: 1; min-width: 0; }
.ps__skurz { color: var(--fg-dim); font-size: 13px; white-space: nowrap; }
.ps__tag { display: grid; grid-template-columns: minmax(0, 1fr) 128px 72px; gap: 6px; align-items: center;
  padding: 4px 0; border-top: 1px solid color-mix(in srgb, var(--fg) 7%, transparent); }
.ps__tname { font-size: 14px; overflow-wrap: anywhere; }
.ps__tname .mute2 { font-size: 11px; display: block; }
.ps__speichern { display: grid; gap: 8px; margin-top: 14px; padding: 10px; position: sticky; bottom: calc(76px + env(safe-area-inset-bottom));
  z-index: 3; background: var(--bg-elev); }
.ps__text { min-height: 60vh; font: 12.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre; overflow: auto; tab-size: 2; }
.ps__diff { margin: 0; padding: 10px; border-radius: 12px; overflow-x: auto; max-height: 50vh;
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: color-mix(in srgb, var(--fg) 5%, transparent); }
.ps__plus { color: #38d996; }
.ps__minus { color: var(--danger); }
.ps__at { color: var(--fg-dim); }
.ps__pfad { word-break: break-all; }

/* ---------- Vergleich: Rechnung (Punkte v3) ---------- */
button.rank__pts { background: none; border: 0; color: inherit; cursor: pointer; padding: 4px 0 4px 6px; font-family: inherit; }
.chip--sm { padding: 6px 12px; font-size: 13px; min-height: 0; }
.rechnung { display: grid; gap: 6px; }
.rechnung__kopf { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-dim); margin-top: 10px; }
.rechnung__z { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.2em; gap: 8px; align-items: baseline; padding: 5px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 6%, transparent); }
.rechnung__z > span:first-child { overflow-wrap: anywhere; }
.rechnung__z b { text-align: right; font-variant-numeric: tabular-nums; }
.rechnung__summe .rechnung__z { border-bottom: 0; font-weight: 700; }
.rechnung__gesamt .rechnung__z { font-size: 18px; border-top: 2px solid var(--line); }
.stufe { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; margin-left: 4px; white-space: nowrap; }
.stufe--bronze { background: rgba(205,127,50,.18); color: #e0a06a; }
.stufe--silber { background: rgba(192,200,214,.18); color: #cfd6e2; }
.stufe--gold { background: rgba(255,209,102,.18); color: #ffd166; }
.stufe--platin { background: rgba(160,230,255,.18); color: #a8e8ff; }

/* Verlauf: Admin waehlt, wessen Einheiten (Punkte v3, Etappe 3) */
.verlauf__person { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 4px 4px 4px 12px;
  border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); }
.verlauf__person .field { border: 0; background: transparent; flex: 1; min-width: 0; }
.verlauf__person.is-fremd { border-color: #ffd166; background: rgba(255,209,102,.08); }

/* CSV-Import (Punkte v3, Etappe 3) */
.csv__feld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px; align-items: center; }
.csv__feld > span { display: grid; font-size: 14px; }
.csv__feld small { color: var(--fg-dim); font-size: 11px; }
.csv__zaehler { display: flex; gap: 14px; flex-wrap: wrap; }
.csv__rot { color: var(--danger); }
.csv__liste { display: grid; gap: 6px; max-height: 45vh; overflow: auto; }
.csv__zeile { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 6px; padding: 6px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--fg) 4%, transparent); font-size: 13px; }
.csv__zeile small { display: block; color: var(--fg-dim); }
.csv__zeile--fehler { background: rgba(255,77,106,.08); }
.csv__zeile--fehler small { color: var(--danger); }
.csv__zeile--vorhanden { opacity: .6; }
.csv__nr { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.csv__inhalt { overflow-wrap: anywhere; }

/* Erfolge: einklappbare Gruppen (Etappe 5) */
.ach__gruppe > summary { cursor: pointer; list-style: none; }
.ach__gruppe > summary::-webkit-details-marker { display: none; }
.ach__gruppe > summary span:last-child { transition: color .15s; }
.ach__gruppe[open] > summary span:last-child { color: var(--accent); }

/* Mitloggen (Etappe 4) */
.chip--person { display: inline-flex; align-items: center; gap: 6px; padding-left: 5px; }
.chip__av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff; }
.chip--person.is-fest { opacity: .75; }
.mitspieler__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mitspieler__liste { margin-top: 8px; }
.mitspieler__nachricht { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
.mitspieler__nachricht { position: relative; padding-right: 52px; }
.mitspieler__nachricht .iconbtn { position: absolute; top: 10px; right: 10px; }

/* Mehr: aufklappbare Bloecke (22.09.2026) */
.mehr__block { margin-top: 14px; }
.mehr__block > summary { list-style: none; cursor: pointer; }
.mehr__block > summary::-webkit-details-marker { display: none; }
.mehr__pfeil { transition: transform .15s; font-size: 20px; }
.mehr__block[open] > summary .mehr__pfeil { transform: rotate(90deg); }
.mehr__inhalt { padding: 0 2px 6px; }

/* =====================================================================
   Feinschliff 22.09.2026 (Martin: "Make it beautiful")
   Mehr Tiefe, weniger Kante: Flaechen bekommen einen feinen Lichtkant oben
   und einen weichen Schatten, Zeilen einen Hauch ihrer Sportfarbe, aktive
   Elemente ein leichtes Gluehen. Farben und Tokens bleiben dieselben -
   es aendert sich das Licht, nicht die Palette.
   ===================================================================== */
:root {
  --glanz: inset 0 1px 0 rgba(255, 255, 255, .05);
  --schatten: 0 12px 32px -20px rgba(0, 0, 0, .85);
}
.card, .item, .stat, .hero, .rank__row {
  box-shadow: var(--glanz), var(--schatten);
}
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 55%), var(--bg-elev);
}
/* Die Sportfarbe als Schimmer links - dort, wo auch das Symbol sitzt.
   Ohne --c bleibt die Zeile neutral (transparent statt Akzentfarbe). */
.item {
  background:
    radial-gradient(160px 100px at 0% 50%, color-mix(in srgb, var(--c, transparent) 12%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, 0) 60%),
    var(--bg-elev);
}
.stat { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 60%), var(--bg-elev); }
.stat.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)), var(--bg-elev);
  box-shadow: var(--glanz), 0 10px 28px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.stat__v { font-size: 24px; }
.btn--primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 26px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn--primary:active { filter: brightness(1.08); }
.chip.is-active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 18px -10px color-mix(in srgb, var(--c, var(--accent)) 90%, transparent);
}
.chips--klein .chip { min-height: 34px; padding: 0 12px; font-size: 13px; }
.chips--klein .chip .ico { width: 16px; height: 16px; }
.bar__track { height: 10px; }
.bar__fill { box-shadow: 0 0 14px -3px color-mix(in srgb, var(--c) 70%, transparent); }
.statgrid--auto { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)); }
.tabbar a.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, var(--bg-elev)), var(--bg-elev));
  box-shadow: var(--glanz);
}
.tabbar a.is-active .tab__ico .ico { color: #b9a8ff; }
.verlauf__person .field { min-height: 44px; }
.mehr__block > summary.item { margin: 0; }
.mehr__block + .mehr__block { margin-top: 10px; }
/* Tastatur: sichtbarer Fokus, ohne Maus- und Fingerbedienung zu stoeren. */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.card.card--warn { background: rgba(255, 77, 106, .07); }
/* Einheit klein hinter der Zahl ("6,0 km"), darunter nur der Name - sonst
   brach "Höhenmeter · m" bei vier Kacheln in zwei Zeilen. */
.stat__u { font-size: 12px; font-weight: 700; color: var(--fg-mute); margin-left: 3px; letter-spacing: 0; }
.stat__k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Erfolge: Gruppenkopf als Zeile mit Symbol und feinem Fortschrittsbalken */
.ach__gruppe > summary.item { cursor: pointer; }
.ach__gruppe > summary .item__r { font-weight: 700; font-size: 14px; color: var(--fg-dim); }
.ach__balken--klein { height: 5px; margin-top: 7px; }
.ach__gruppe[open] > summary .item__dot { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }
.ach__gruppe + .ach__gruppe { margin-top: 10px; }
.ach__mehr { margin-top: 10px; }
.ach__mehr > summary { list-style: none; display: grid; place-items: center; cursor: pointer; }
.ach__mehr > summary::-webkit-details-marker { display: none; }
.ach__mehr[open] > summary { color: var(--fg-dim); }

/* ---------- Training machen (Etappe A, 25.09.2026) ---------- */
.train__kopf { margin-top: 8px; }
.train__zeit { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.train__pause {
  position: sticky; top: 8px; z-index: 5; margin-top: 10px; display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 16px; border-radius: 16px; border: 1px solid var(--c);
  background: color-mix(in srgb, var(--c) 22%, var(--bg-elev));
}
.train__pause[hidden] { display: none; }
.train__pause span { color: var(--fg-dim); font-weight: 700; }
.train__pausezeit { flex: 1; font-size: 24px; font-variant-numeric: tabular-nums; }
.train__pause .btn { min-height: 40px; padding: 0 10px; }
.train__liste { display: grid; gap: 12px; margin-top: 12px; }
.train__uname { font-weight: 800; font-size: 17px; overflow-wrap: anywhere; }
.train__saetze { display: grid; gap: 8px; margin-top: 10px; }
.train__satz { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; border: 1px solid transparent; }
.train__satz.is-dran { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.train__satz.is-fertig .field { opacity: .55; }
.train__nr { flex: 0 0 22px; text-align: center; font-weight: 800; color: var(--fg-dim); }
.train__feld { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 5px; }
.train__feld .field { min-width: 0; width: 100%; min-height: 48px; padding: 0 8px; text-align: center; font-size: 18px; font-weight: 700; }
.train__feld small { color: var(--fg-mute); font-size: 12px; }
.train__haken {
  flex: 0 0 48px; height: 48px; border-radius: 14px; font-size: 22px; font-weight: 900; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--fg-dim);
}
.train__haken[aria-pressed="true"] { border-color: transparent; background: var(--c); color: #fff; }
.train__plus { margin-top: 8px; }
.train__fuss { display: grid; gap: 8px; margin-top: 18px; }

/* ---------- Routine bearbeiten (Etappe B, 25.09.2026) ---------- */
span.lbl { display: block; font-size: 12px; font-weight: 700; color: var(--fg-dim); margin: 0 0 6px 3px; letter-spacing: .04em; }
.rt__name { flex: 1; min-width: 0; font-weight: 800; font-size: 17px; }
.rt__daten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rt__daten .field { width: 100%; min-width: 0; }
.rt__tagkopf { display: flex; align-items: center; gap: 6px; }
.rt__tagname { flex: 1; min-width: 0; font-weight: 800; }
.rt__tag.is-rest { opacity: .75; }
.rt__uebungen { display: grid; gap: 6px; margin-top: 8px; }
.rt__uebung { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.rt__tagfuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.rt__loeschen { margin-left: auto; color: var(--fg-mute); }
.rt__felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.rt__felder .field { width: 100%; min-width: 0; text-align: center; font-weight: 700; font-size: 17px; }
.rt__aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rt__treffer .item { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.rt__bild { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: #fff; color: var(--fg-dim); }
.rt__bild img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Kraft: Routinen mit Tagen und Uebungen (26.09.2026) ---------- */
.kraft__zeitraum { margin-top: 6px; white-space: normal; }
.kraft__zuletzt { margin-top: 6px; font-size: 13.5px; color: var(--fg-dim); }
.kraft__zuletzt b { color: var(--fg); }
.kraft__routine + .kraft__routine { margin-top: 12px; }
.kraft__tage { display: grid; gap: 10px; margin-top: 12px; }
.kraft__tag { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-elev); }
.kraft__tag.is-dran { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--bg-elev)); }
.kraft__tagkopf { display: flex; align-items: center; gap: 10px; }
.kraft__tagname { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.badge--dran { margin-left: 6px; background: var(--c); color: #fff; vertical-align: 2px; padding: 2px 7px; border-radius: 999px; }
.kraft__los { flex: 0 0 auto; min-height: 44px; padding: 0 16px; white-space: nowrap; }
.kraft__uebungen { margin: 10px 0 2px; padding: 0; display: grid; gap: 5px; list-style: none; }
.kraft__uebungen li {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  font-size: 13.5px; color: var(--fg-dim); padding: 2px 2px 2px 10px;
  border-left: 2px solid color-mix(in srgb, var(--c) 45%, transparent);
}
.kraft__uebungen li span { min-width: 0; overflow-wrap: anywhere; color: var(--fg); }
.kraft__uebungen li b { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.kraft__oben { display: grid; gap: 8px; margin-top: 18px; }
.kraft__wger { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kraft__oben .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.kraft__titel { display: flex; align-items: center; gap: 12px; }
.kraft__routine.is-aktiv { border-color: color-mix(in srgb, var(--c) 55%, transparent); }

/* Laufendes Training: ein Band, das man nicht uebersieht. */
.train__band {
  margin-top: 8px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--c);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 28%, var(--bg-elev)), var(--bg-elev));
  box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--c) 90%, transparent);
}
/* Auf der Startseite rot: dort steht es zwischen lauter normalen Dingen. */
.train__band.is-warn { --c: var(--danger); }
.train__bandlink { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.train__bandlink:active { transform: scale(.99); }
.train__bandweg { width: 100%; margin-top: 10px; }
.train__puls {
  flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: var(--c);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); animation: puls 1.8s infinite;
}
@keyframes puls {
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .train__puls { animation: none; } }
.train__bandtext { flex: 1; min-width: 0; display: grid; gap: 3px; }
.train__bandtitel { font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.train__bandsub { font-size: 13px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.train__balken { height: 5px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; margin-top: 3px; }
.train__balken i { display: block; height: 100%; background: var(--c); border-radius: 999px; transition: width .3s; }
.train__bandknopf { flex: 0 0 auto; font-weight: 800; font-size: 14px; color: var(--c); white-space: nowrap; }
.rt__schalter { margin-top: 12px; }

/* ---------- Design-Stufe 1 (27.09.2026) ---------- */
/* Serie und Wochenziel nebeneinander; steht nur eins da, nimmt es die Breite. */
.status2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.status2 > .streak, .status2 > .goal { margin-top: 0; min-width: 0; }
.streak--kurz { gap: 10px; padding: 12px 12px; }
.streak--kurz .streak__v { font-size: 20px; }
.streak--kurz .streak__s, .status2 .goal__s { font-size: 12px; line-height: 1.3; }
.status2 .goal { gap: 10px; padding: 12px 12px; }
.status2 .goal__ring { width: 40px; height: 40px; }
.status2 .goal__v { font-size: 17px; }
/* Routine-Editor: Ruhetage schmal, Fertig oben */
.rt__tag { margin-top: 10px; }
.rt__tag.is-rest { padding-top: 8px; padding-bottom: 8px; opacity: 1; background: var(--bg); }
.rt__tag.is-rest .rt__tagname { min-height: 40px; font-weight: 600; color: var(--fg-dim); background: transparent; border-color: transparent; padding-left: 4px; }
.rt__tag.is-rest .iconbtn { width: 40px; height: 40px; }
.rt__ruhe { flex: 0 0 auto; color: var(--fg-mute); display: grid; place-items: center; }
.rt__plus { margin-top: 10px; }
.rt__fertig { flex: 0 0 auto; }
.rt__uebungen { gap: 6px; }
.rt__uebung { min-height: 0; padding-top: 9px; padding-bottom: 9px; }

/* ---------- Design-Stufe 2 (27.09.2026) ---------- */
.topbar__zurueck { width: 36px; height: 36px; border-radius: 11px; font-size: 24px; font-weight: 700;
  display: grid; place-items: center; text-decoration: none; color: var(--fg); line-height: 1; padding-bottom: 3px; }
.topbar__zurueck[hidden], .brand__mark[hidden] { display: none; }
.verlauf__filter {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 4px; min-height: 46px; padding: 0 14px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elev);
  color: var(--fg-dim); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.verlauf__filter span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verlauf__filter b { color: var(--fg); font-weight: 700; white-space: nowrap; }
.verlauf__filter.is-aktiv { color: var(--fg); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.verlauf__filter.is-fremd { border-color: #ffd166; background: rgba(255,209,102,.08); }
/* Tagesueberschriften im Verlauf enger - bei einer Einheit je Tag war die
   Ueberschrift fast so hoch wie der Eintrag. */
.daygroup { margin-top: 12px; }
.daygroup__h { padding: 4px 4px; margin-bottom: 6px; font-size: 11.5px; }
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.kachel {
  display: grid; gap: 2px; align-content: start; padding: 12px 14px; min-width: 0;
  border-radius: var(--r-md); border: 1px solid var(--line); text-decoration: none; color: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%), var(--bg-elev);
}
.kachel:active { transform: scale(.98); }
.kachel .item__dot { margin-bottom: 6px; }
.kachel__t { font-weight: 800; font-size: 16px; }
.kachel__s { font-size: 12.5px; color: var(--fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kachel .ach__balken { margin-top: 6px; }
.stat__h { font-size: 11px; color: var(--fg-mute); font-variant-numeric: tabular-nums; margin-top: 1px; }
/* Erfolge: Geschafftes einzeilig, Familien als Raster */
.ach__geschafft .item { padding-top: 9px; padding-bottom: 9px; }
.ach__geschafft .item__s { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; }
.ach__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ach__raster > .ach__gruppe { margin-top: 0; min-width: 0; }
.ach__raster > .ach__gruppe[open] { grid-column: 1 / -1; }
.ach__kachel { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "dot r" "main main";
  gap: 4px 10px; align-items: center; padding: 10px 12px; }
.ach__kachel > .item__dot { width: 32px; height: 32px; border-radius: 10px; }
.ach__kachel .ach__balken { margin-top: 5px; }
.ach__kachel > .item__dot { grid-area: dot; }
.ach__kachel > .item__r { grid-area: r; justify-self: end; font-variant-numeric: tabular-nums; }
.ach__kachel > .item__main { grid-area: main; min-width: 0; }
.ach__kachel .item__t { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Design-Stufe 3: ein Rhythmus fuer alle Seiten (27.09.2026) ----------
   Gemessen standen zwischen den Bloecken einer Seite elf verschiedene
   Abstaende - jede Komponente brachte ihren eigenen margin-top mit, manche
   inline im JavaScript. Hier gilt fuer die direkten Kinder einer Seite genau
   ein Rhythmus. Das !important ist Absicht: es muss auch die Inline-Werte aus
   den Ansichten schlagen, sonst waere es nur der zwoelfte Wert. Verschachtelter
   Inhalt (Listen, Karten, Blaetter) bleibt unberuehrt. */
.page > * { margin-top: var(--abstand) !important; margin-bottom: 0 !important; }
.page > :first-child { margin-top: var(--abstand-klein) !important; }
.page > .section-title { margin-top: var(--abstand-gross) !important; }
.page > .section-title:first-child { margin-top: var(--abstand) !important; }
.page > .section-title + * { margin-top: var(--abstand-klein) !important; }
.quelle { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 3px;
  font-size: 11.5px; font-weight: 600; color: var(--fg-mute); }
/* Routine-Editor: Trainingstage zuklappbar (27.09.2026) */
.rt__klapp { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 8px 4px;
  background: none; border: 0; color: var(--fg-dim); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.rt__klapptext { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt__klapp[aria-expanded="true"] .mehr__pfeil { transform: rotate(90deg); }
.rt__klapp .mehr__pfeil { transition: transform .15s; }
.rt__klappinhalt[hidden] { display: none; }
.bar__knopf { display: block; width: 100%; padding: 6px 0; background: none; border: 0; color: inherit;
  font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.bar__knopf:active { background: var(--bg-elev); }

/* ---------- Vereinslogo statt Verlaufskachel (27.09.2026) ----------
   Stark vereinfachtes DUC-Krefeld-Abzeichen (Krokodil mit Ball) in den
   Themenfarben. Die alte Kachel mit Verlauf und Balken faellt weg. */
.brand__mark { background: none !important; padding: 0 !important; width: 36px; height: 36px; border-radius: 0; overflow: visible; }
.brand__mark svg { display: block; width: 100%; height: 100%; }
.login__logo { background: none !important; padding: 0 !important; width: 84px; height: 84px; border-radius: 50%; }
.login__logo svg { display: block; width: 100%; height: 100%; }
.thema { display: grid; gap: 12px; }
.thema__reihe { display: flex; align-items: center; gap: 14px; }
.thema__logo { flex: 0 0 56px; width: 56px; height: 56px; }
.thema__logo svg { display: block; width: 100%; height: 100%; }
.thema__wahl { flex: 1; display: grid; justify-items: center; gap: 4px; font-size: 12.5px; color: var(--fg-dim); font-weight: 700; }
.thema__wahl input { width: 100%; height: 44px; padding: 2px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-elev-2); cursor: pointer; }
.thema__punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.thema__punkt + .thema__punkt { margin-left: -6px; }

/* Training: Laufzeit und Pause angeheftet (27.09.2026). top = Hoehe der
   Kopfzeile, damit der Kasten darunter klebt und nicht dahinter. */
.train__oben { position: sticky; top: 68px; z-index: 15; display: grid; gap: 8px;
  background: linear-gradient(180deg, var(--bg) 70%, transparent); padding-bottom: 6px; }
.train__oben .train__kopf { margin-top: 0; padding-top: 10px; padding-bottom: 10px; }
.train__oben .train__pause { position: static; margin-top: 0; }
/* Zu kurz fuer die Mindestdaten (27.09.2026): steht da, zaehlt aber nicht. */
.item.is-zukurz { opacity: .6; border-style: dashed; }
.zaehlt-nicht { color: var(--fg-mute); font-style: italic; }

/* Training: Zirkel in Runden, Aufwaermen/Cool-down mit Uhr (27.09.2026) */
.train__zirkel .train__saetze { gap: 6px; }
.train__runde { margin-top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.train__runde.is-fertig { color: var(--fg-mute); }
.train__runde:first-child { margin-top: 2px; }
.train__satzname { font-size: 13px; font-weight: 700; color: var(--fg-dim); margin: 0 0 2px 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.train__phase { display: grid; gap: 10px; }
.train__phasekopf { display: flex; align-items: center; gap: 12px; }
.train__phasezeit { font-size: 22px; font-variant-numeric: tabular-nums; color: var(--fg-dim); }
.train__phase.is-laeuft { border-color: var(--c); }
.train__phase.is-laeuft .train__phasezeit { color: var(--fg); }
.train__phase.is-fertig { opacity: .75; }

/* Uebungserklaerung (27.09.2026) */
.train__erklaer, .kraft__erklaer { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer; }
.train__erklaer span, .kraft__erklaer::after { color: var(--fg-mute); font-weight: 600; }
.kraft__uebungen li .kraft__erklaer { min-width: 0; overflow-wrap: anywhere; color: var(--fg); }
.uebung__bilder { display: flex; gap: 8px; overflow-x: auto; margin: 6px 0 10px; scrollbar-width: none; }
.uebung__bilder img { flex: 0 0 auto; height: 150px; max-width: 85%; object-fit: contain; border-radius: var(--r-md); background: #fff; }
.uebung__zeile { display: flex; gap: 10px; font-size: 13.5px; margin-top: 6px; }
.uebung__zeile span { flex: 0 0 96px; color: var(--fg-mute); }
.uebung__zeile b { font-weight: 600; }
.uebung__text { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--fg-dim); }
.uebung__text p { margin: 0 0 10px; }
.uebung__text ul { margin: 0 0 10px; padding-left: 20px; }