:root {
  --color-bg: #f4f1ea;
  --color-surface: #ffffff;
  --color-primary: #ff9f1c;
  --color-primary-dark: #e08600;
  --color-secondary: #2ec4b6;
  --color-text: #2b2b2b;
  --color-muted: #6b6b6b;
  --color-danger: #e63946;
  --color-border: #e5e0d5;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease;
}

/* Individueller Profil-Hintergrund (vorgegebene Themes). Karten/Listen
   behalten ihre eigene weisse Flaeche (--color-surface) und bleiben so bei
   jedem Theme lesbar - nur der Seitenhintergrund selbst aendert sich.
   Jedes Theme kombiniert einen Farbverlauf mit einem gekachelten Muster
   (Sterne/Blasen/Streifen/Ziegel/...), damit der Hintergrund nicht nur
   einfarbig/flach wirkt. Dieselben background-image-Werte werden unten bei
   .theme-swatch-* fuer die Vorschau im Picker wiederverwendet. */
body[data-theme="weltraum"] {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 1px, transparent 1.6px),
    linear-gradient(160deg, #1b1030, #2b1a55 60%, #1b1030);
  background-size: 26px 26px, auto;
  color: #f0ecff;
}

body[data-theme="dino"] {
  background-image: radial-gradient(circle, rgba(46, 125, 50, 0.25) 2.5px, transparent 3px),
    linear-gradient(160deg, #cdeac0, #eaf5e4 60%, #d8efc9);
  background-size: 34px 34px, auto;
}

body[data-theme="einhorn"] {
  background-image: radial-gradient(circle, rgba(255, 215, 0, 0.5) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1.6px),
    linear-gradient(160deg, #f3d9ff, #ffe3f3 60%, #e9d9ff);
  background-size: 40px 40px, 24px 24px, auto;
  background-position: 0 0, 12px 12px, 0 0;
}

body[data-theme="fussball"] {
  background-image: repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0,
      rgba(255, 255, 255, 0.16) 24px,
      transparent 24px,
      transparent 48px
    ),
    linear-gradient(160deg, #bfe6c2, #eaf7ea 60%, #cdeecb);
}

body[data-theme="blumen"] {
  background-image: radial-gradient(circle, rgba(255, 105, 180, 0.35) 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 205, 60, 0.4) 1.5px, transparent 2px),
    linear-gradient(160deg, #ffe3ef, #fff8e1 60%, #ffe9d9);
  background-size: 38px 38px, 38px 38px, auto;
  background-position: 0 0, 19px 19px, 0 0;
}

body[data-theme="ozean"] {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 2.5px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.5px, transparent 2px),
    linear-gradient(160deg, #7fd8e8, #cdf3f6 60%, #a3e4f0);
  background-size: 46px 46px, 26px 26px, auto;
  background-position: 0 0, 15px 30px, 0 0;
}

body[data-theme="dschungel"] {
  background-image: radial-gradient(circle, rgba(20, 83, 45, 0.35) 3px, transparent 3.5px),
    radial-gradient(circle, rgba(20, 83, 45, 0.2) 2px, transparent 2.5px),
    linear-gradient(160deg, #6fbf73, #d3ecd2 60%, #8fd08f);
  background-size: 44px 44px, 26px 26px, auto;
  background-position: 0 0, 20px 10px, 0 0;
}

body[data-theme="regenbogen"] {
  background-image: repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18) 0,
      rgba(255, 255, 255, 0.18) 10px,
      transparent 10px,
      transparent 20px
    ),
    linear-gradient(120deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
}

body[data-theme="ritter"] {
  background-image: linear-gradient(rgba(255, 255, 255, 0.18) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 2px, transparent 2px),
    linear-gradient(160deg, #a99374, #d8c9a8 60%, #a99374);
  background-size: 42px 22px, 42px 22px, auto;
}

body[data-theme="piraten"] {
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 205, 60, 0.16) 0,
      rgba(255, 205, 60, 0.16) 8px,
      transparent 8px,
      transparent 18px
    ),
    linear-gradient(160deg, #16213e, #2c3e6b 60%, #16213e);
  color: #f0ecff;
}

body[data-theme="schnee"] {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 1.6px),
    linear-gradient(160deg, #bcd9ec, #eef7fb 60%, #cfe6f4);
  background-size: 30px 30px, 18px 18px, auto;
  background-position: 0 0, 9px 9px, 0 0;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}

.card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
}

.brand {
  text-align: center;
  margin-bottom: 20px;
}

.brand .logo {
  font-size: 42px;
  line-height: 1;
}

.brand h1 {
  font-size: 22px;
  margin: 8px 0 0;
}

h2 {
  font-size: 18px;
  margin: 0 0 16px;
}

label {
  display: block;
  font-size: 14px;
  color: var(--color-muted);
  margin: 14px 0 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
}

input:focus, select:focus {
  outline: none;
  border-color: var(--color-primary);
}

button {
  font-family: inherit;
  cursor: pointer;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  margin-top: 18px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  transition: background 0.15s ease, transform 0.05s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn:hover {
  background: var(--color-primary-dark);
}

.btn.secondary {
  background: transparent;
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
}

.btn.danger {
  background: var(--color-danger);
}

.btn.small {
  min-height: 40px;
  margin-top: 8px;
  font-size: 14px;
}

.link-row {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--color-muted);
}

.link-row a, .link {
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.error-banner {
  width: 100%;
  max-width: 420px;
  background: #fdecea;
  color: var(--color-danger);
  border: 1px solid #f5c6c6;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 14px;
}

.success-banner {
  width: 100%;
  max-width: 420px;
  background: #eafaf3;
  color: #1a8a5f;
  border: 1px solid #b9e8d3;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 14px;
  font-weight: 600;
}

.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-primary-dark);
  font-weight: 600;
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.badge-tile {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center;
  box-shadow: var(--shadow);
  color: var(--color-text);
}

.badge-tile.locked {
  opacity: 0.45;
}

/* Loop-Erfolge (v017): dezenter goldener Rahmen, damit sie sich von den
   einmaligen Erfolgen abheben, auch bevor die erste Runde geschafft ist. */
.badge-tile.repeatable {
  box-shadow: var(--shadow), 0 0 0 2px #ffb703;
}

/* Stern-Zaehler oben rechts auf der Kachel: zeigt, wie oft ein Loop-Erfolg
   schon geschafft wurde (Nutzerwunsch). */
.badge-loop-count {
  position: absolute;
  top: -8px;
  right: -6px;
  background: #ffb703;
  color: #4a2f00;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
}

.badge-tile .badge-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 6px;
}

.badge-tile .badge-name {
  font-weight: 600;
  font-size: 13px;
}

.badge-tile .badge-desc {
  font-size: 11px;
  color: var(--color-muted);
  margin-top: 2px;
}

/* Levelsystem / Quest-Karte */
.quest-card {
  width: 100%;
  background: linear-gradient(135deg, #7c5cff, #a58cff);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  margin-top: 14px;
}

.quest-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quest-icon {
  font-size: 32px;
}

.quest-title {
  font-weight: 700;
  font-size: 16px;
}

.quest-xp {
  font-size: 13px;
  opacity: 0.9;
}

.quest-next {
  font-size: 12px;
  margin-top: 8px;
  opacity: 0.95;
}

.level-path {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.level-step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  box-shadow: var(--shadow);
  color: var(--color-text);
}

.level-step.locked {
  opacity: 0.45;
}

.level-step.current {
  border: 2px solid #7c5cff;
}

.level-step-icon {
  font-size: 24px;
}

.level-step-title {
  font-weight: 600;
  font-size: 14px;
}

.level-step-xp {
  font-size: 12px;
  color: var(--color-muted);
}

/* Profilauswahl */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 640px;
}

.profile-tile {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text);
}

.profile-tile .avatar {
  font-size: 52px;
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);
}

.profile-tile .role-tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-tile .coins {
  font-size: 14px;
  color: var(--color-primary-dark);
  font-weight: 700;
}

/* Kachel-Buttons im Kind-Dashboard (Meine Erfolge / Mein Avatar) - quadratisch
   und mit grossem Icon, damit sie fuer Kinder leichter zu erkennen/treffen
   sind als ein schmaler Text-Button */
.dashboard-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Kachel-Look ueberarbeitet (v015_002, Nutzerwunsch "cooler gestalten"):
   statt einfarbiger weisser Flaeche jetzt ein Farbverlauf je Kachel-Typ,
   Icon in einem runden "Badge"-Kreis und eine kleine Info-Pille fuer die
   Zahlen (Aufgaben/Belohnungen/Erfolge). Farben bewusst je Kachel fest
   verdrahtet (nicht vom Profil-Hintergrund-Theme abhaengig), damit die
   Kacheln auf jedem der 12 Hintergrund-Themes gut lesbar bleiben. */
.dashboard-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  padding: 12px 8px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dashboard-tile:active {
  transform: scale(0.95);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.dashboard-tile-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.dashboard-tile-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: rgba(255, 255, 255, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
}

.dashboard-tile-tasks { background: linear-gradient(135deg, #2ec4b6, #54d9cb); }
.dashboard-tile-rewards { background: linear-gradient(135deg, #ff9f1c, #ffbf69); }
.dashboard-tile-badges { background: linear-gradient(135deg, #ffb703, #fb8500); }
.dashboard-tile-avatar { background: linear-gradient(135deg, #8e7cc3, #6a5acd); }
.dashboard-tile-savings { background: linear-gradient(135deg, #06a77d, #2ec4b6); }
/* "Mein Hintergrund" im Kind-Dashboard (v020_003, Nutzerwunsch). */
.dashboard-tile-theme { background: linear-gradient(135deg, #f72585, #ff8fab); }
/* Aktions-Kacheln im Eltern-Dashboard (v020_002, Nutzerwunsch): gleiches
   Kachel-Muster wie im Kind-Dashboard, eigene Farben je Bereich. */
.dashboard-tile-stats { background: linear-gradient(135deg, #3a86ff, #8ecae6); }
.dashboard-tile-settings { background: linear-gradient(135deg, #5c677d, #98a4b3); }

/* PIN-Eingabe */
.pin-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0;
}

.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: transparent;
}

.pin-dot.filled {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}

.pin-pad button {
  min-height: 56px;
  font-size: 20px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-text);
}

.pin-pad button:active {
  background: var(--color-bg);
}

.pin-pad .empty {
  visibility: hidden;
}

/* Dashboard */
/* iPhones mit Notch/Dynamic Island: die App laeuft im installierten PWA-Modus
   dank apple-mobile-web-app-status-bar-style=black-translucent unter der
   Statusleiste/Uhr weiter - ohne den zusaetzlichen oberen Sicherheitsabstand
   wuerde der Zurueck-Button dort verdeckt und ist nicht mehr antippbar. */
.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  padding-top: max(14px, calc(env(safe-area-inset-top, 0px) + 10px));
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow);
}

.topbar .who {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.topbar .who .avatar {
  font-size: 26px;
}

/* Groesserer Tippbereich fuer den Zurueck-Button (auch von Kindern genutzt,
   z.B. auf den Erfolge-/Kontoauszug-Screens) - mindestens 44x44px Zielflaeche
   statt reinem kleinem Text, dazu sichtbarer als Buttonflaeche statt nur Text. */
.topbar button {
  background: var(--color-bg);
  border: none;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  padding: 12px 18px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
}

.topbar button:active {
  background: var(--color-border);
}

.content {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.balance-card {
  background: linear-gradient(135deg, var(--color-primary), #ffb648);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow);
}

.balance-card .amount {
  font-size: 40px;
  font-weight: 800;
}

.balance-card .label {
  font-size: 14px;
  opacity: 0.9;
}

.section {
  margin-top: 24px;
}

.section h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.empty-hint {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 18px;
  color: var(--color-muted);
  font-size: 14px;
  text-align: center;
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  color: var(--color-text);
}

.list-row.inactive {
  opacity: 0.5;
}

.list-row .info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list-row .info .avatar {
  font-size: 24px;
}

.list-row .meta {
  font-size: 12px;
  color: var(--color-muted);
}

.photo-upload {
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.photo-upload input[type="file"] {
  width: 100%;
  font-size: 13px;
  color: var(--color-text);
}

.photo-upload .photo-filename {
  min-height: 16px;
  margin-top: 4px;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-border);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.list-row .actions {
  display: flex;
  gap: 8px;
}

.list-row .actions button {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--color-text);
}

.list-row .actions button.danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Kinder-Kontostaende im Elternprofil (v020_001, Nutzerwunsch): eigene
   Karten statt einer engen list-row, damit die Aktions-Buttons auf dem
   Handy gross genug zum Treffen sind und bei Bedarf umbrechen. */
.kid-card {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  color: var(--color-text);
}

.kid-card.inactive {
  opacity: 0.5;
}

.kid-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}

.kid-card-top .info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.kid-card-top .info .avatar {
  font-size: 24px;
}

.kid-card-top .info span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kid-card-top .coins {
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

.kid-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kid-card-actions button {
  flex: 1 1 auto;
  min-width: 84px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 8px;
  font-size: 13px;
  color: var(--color-text);
  text-align: center;
}

.invite-code {
  display: inline-block;
  background: var(--color-bg);
  border-radius: 8px;
  padding: 4px 10px;
  font-family: monospace;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.avatar-picker button {
  width: 44px;
  height: 44px;
  font-size: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: #fff;
}

.avatar-picker button.selected {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-size: 11px;
  font-weight: 600;
}

.theme-swatch-icon {
  font-size: 22px;
}

.theme-swatch-label {
  line-height: 1.2;
  text-align: center;
}

.theme-swatch.selected {
  border-color: var(--color-primary);
}

.theme-swatch-neutral {
  background: #ffffff;
}

.theme-swatch-weltraum {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 1px, transparent 1.6px),
    linear-gradient(160deg, #1b1030, #2b1a55 60%, #1b1030);
  background-size: 13px 13px, auto;
  color: #f0ecff;
}

.theme-swatch-dino {
  background-image: radial-gradient(circle, rgba(46, 125, 50, 0.25) 2.5px, transparent 3px),
    linear-gradient(160deg, #cdeac0, #eaf5e4 60%, #d8efc9);
  background-size: 17px 17px, auto;
}

.theme-swatch-einhorn {
  background-image: radial-gradient(circle, rgba(255, 215, 0, 0.5) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1.6px),
    linear-gradient(160deg, #f3d9ff, #ffe3f3 60%, #e9d9ff);
  background-size: 20px 20px, 12px 12px, auto;
  background-position: 0 0, 6px 6px, 0 0;
}

.theme-swatch-fussball {
  background-image: repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16) 0,
      rgba(255, 255, 255, 0.16) 12px,
      transparent 12px,
      transparent 24px
    ),
    linear-gradient(160deg, #bfe6c2, #eaf7ea 60%, #cdeecb);
}

.theme-swatch-blumen {
  background-image: radial-gradient(circle, rgba(255, 105, 180, 0.35) 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 205, 60, 0.4) 1.5px, transparent 2px),
    linear-gradient(160deg, #ffe3ef, #fff8e1 60%, #ffe9d9);
  background-size: 19px 19px, 19px 19px, auto;
  background-position: 0 0, 9.5px 9.5px, 0 0;
}

.theme-swatch-ozean {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.55) 2.5px, transparent 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.5px, transparent 2px),
    linear-gradient(160deg, #7fd8e8, #cdf3f6 60%, #a3e4f0);
  background-size: 23px 23px, 13px 13px, auto;
  background-position: 0 0, 8px 15px, 0 0;
}

.theme-swatch-dschungel {
  background-image: radial-gradient(circle, rgba(20, 83, 45, 0.35) 3px, transparent 3.5px),
    radial-gradient(circle, rgba(20, 83, 45, 0.2) 2px, transparent 2.5px),
    linear-gradient(160deg, #6fbf73, #d3ecd2 60%, #8fd08f);
  background-size: 22px 22px, 13px 13px, auto;
  background-position: 0 0, 10px 5px, 0 0;
}

.theme-swatch-regenbogen {
  background-image: repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.18) 0,
      rgba(255, 255, 255, 0.18) 5px,
      transparent 5px,
      transparent 10px
    ),
    linear-gradient(120deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff);
}

.theme-swatch-ritter {
  background-image: linear-gradient(rgba(255, 255, 255, 0.18) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 2px, transparent 2px),
    linear-gradient(160deg, #a99374, #d8c9a8 60%, #a99374);
  background-size: 21px 11px, 21px 11px, auto;
}

.theme-swatch-piraten {
  background-image: repeating-linear-gradient(
      45deg,
      rgba(255, 205, 60, 0.16) 0,
      rgba(255, 205, 60, 0.16) 4px,
      transparent 4px,
      transparent 9px
    ),
    linear-gradient(160deg, #16213e, #2c3e6b 60%, #16213e);
  color: #f0ecff;
}

.theme-swatch-schnee {
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.9) 1.5px, transparent 2px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 1.6px),
    linear-gradient(160deg, #bcd9ec, #eef7fb 60%, #cfe6f4);
  background-size: 15px 15px, 9px 9px, auto;
  background-position: 0 0, 4.5px 4.5px, 0 0;
}

/* Avatar-Editor (v014): eigener (DiceBear-)Avatar zusaetzlich zum Emoji */
.avatar-editor-preview {
  display: flex;
  justify-content: center;
  margin: 12px 0 18px;
}

.avatar-editor-preview img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--color-border);
  background: #fff;
  object-fit: cover;
}

.avatar-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.avatar-tabs button {
  flex: 1;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: #fff;
  font-weight: 600;
}

.avatar-tabs button.selected {
  border-color: var(--color-primary);
  background: var(--color-bg);
}

.avatar-preset-buttons {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.avatar-preset-buttons button {
  flex: 1;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: #fff;
  font-size: 13px;
}

.avatar-trait-group {
  margin-bottom: 16px;
}

.avatar-trait-group label {
  display: block;
  margin-bottom: 6px;
}

.avatar-trait-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-trait-picker button {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-size: 13px;
}

.avatar-trait-picker button.selected {
  border-color: var(--color-primary);
  background: var(--color-bg);
  font-weight: 600;
}

.avatar-trait-picker button.none-swatch {
  color: var(--color-muted);
}

.color-swatch-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-swatch-picker button {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  padding: 0;
}

.color-swatch-picker button.selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.weekday-picker {
  margin-top: 6px;
}

.weekday-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.weekday-btn {
  width: 44px;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
}

.weekday-btn.selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.spinner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-muted);
  z-index: 50;
}

@media (min-width: 600px) {
  :root {
    font-size: 17px;
  }
}

/* Statistik drucken / als PDF speichern (v019, Nutzerwunsch): nur den
   Inhalt der Statistik-Seite drucken, Topbar/Buttons ausblenden. */
@media print {
  .topbar, .btn, button, .error-banner, .success-banner {
    display: none !important;
  }
  body {
    background: #fff !important;
  }
  .content {
    padding: 0 !important;
  }
}