/* Rudelchef, Look A (Bonbon) mit dem Ring aus B. Schriften Fredoka + Nunito. */
:root {
  --grund: #F4F1FF;
  --karte: #FFFFFF;
  --text: #24213B;
  --text2: #615C7D;
  --linie: #E4DFF5;
  --lila: #5B3CC4;
  --lila-dunkel: #43299A;
  --lila-hell: #E7E1FF;
  --lila-spur: #7B60D6;
  --gelb: #FFE6A1;
  --gelb-text: #7A4E00;
  --julia: #FF8E6B;
  --lukas: #7FE3CB;
  --julia-text: #A33A16;
  --lukas-text: #0D6B57;
  --julia-hell: #FFE3D9;
  --lukas-hell: #D9F7EF;
  --orange: #D9480F;
  --gut-bg: #D3F3E5; --gut-text: #0D6B47;
  --mittel-bg: #FFE4C4; --mittel-text: #8A4200;
  --rot-bg: #FFD6DC; --rot-text: #A1203A;
  --info-bg: #DDF1FF; --info-text: #12609A;
  --rund: 20px;
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--grund); color: var(--text); }
body { font-family: "Nunito", system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, select, textarea { font: inherit; color: var(--text); }
h1, h2, h3, .zahl, .fredoka { font-family: "Fredoka", "Nunito", system-ui, sans-serif; font-weight: 600; }
h1 { font-size: 27px; margin: 0; line-height: 1.1; }
h2 { font-size: 18px; margin: 0; }
h3 { font-size: 16px; margin: 0; }
.leise { color: var(--text2); font-size: 13px; }
.klein { font-size: 12px; }
.versteckt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; padding: calc(var(--oben) + 18px) 18px calc(var(--unten) + 170px); }
.laden { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--text2); }
.laden img { border-radius: 50%; background: #fff; }
.seite { display: flex; flex-direction: column; gap: 14px; }

/* Kopf */
.kopf { display: flex; align-items: center; justify-content: space-between; min-height: 52px; gap: 12px; }
.marke { display: flex; align-items: center; gap: 6px; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 14px; color: var(--lila); }
button.marke { background: none; border: 0; padding: 0; min-height: 28px; cursor: pointer; }
.marke-pfeil { font-size: 17px; line-height: 1; margin-left: -1px; opacity: .75; }
button.ring { background: none; border: 0; padding: 0; cursor: pointer; display: block; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--karte);
  font-size: 14px; font-weight: 800; white-space: nowrap; }
.chip.weg { background: var(--gelb); color: var(--gelb-text); }

/* Karten */
.karte { background: var(--karte); border-radius: var(--rund); padding: 14px 16px; }
.karte.lila { background: var(--lila); color: #fff; }
.karte.gelb { background: var(--gelb); }
.abschnitt { display: flex; flex-direction: column; gap: 8px; }
.abschnitt-kopf { display: flex; justify-content: space-between; align-items: baseline; min-height: 22px; }
.abschnitt-kopf h2 { font-size: 17px; }
.link { color: var(--lila); font-size: 14px; font-weight: 800; min-height: 32px; }

/* Ring */
.ring-karte { display: flex; align-items: center; gap: 14px; background: var(--lila); color: #fff; border-radius: 26px; padding: 14px; }
.ring { position: relative; width: 136px; height: 136px; flex-shrink: 0; }
.ring img { position: absolute; left: 24px; top: 24px; width: 88px; height: 88px; border-radius: 50%; background: #fff; object-fit: contain; }
.ring-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ring-info .zahl { font-size: 40px; line-height: 1; }
.ring-info .zahl span { font-size: 18px; color: #D9D0FF; }
.punkt { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.legende { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #EDE8FF; }
.legende span { display: flex; align-items: center; gap: 6px; }
.belohnung { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: var(--gelb); }

.blase { position: relative; background: var(--gelb); border-radius: 20px; padding: 11px 16px; margin-top: -4px; }
.blase::before { content: ""; position: absolute; top: -6px; left: 75px; width: 14px; height: 14px; background: var(--gelb); transform: rotate(45deg); }
.blase p { position: relative; margin: 0; font-size: 16px; font-weight: 800; }
.blase .laune { position: relative; font-size: 13px; color: var(--gelb-text); margin-top: 2px; }
.blase .antworten { position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.blase .antworten button { min-height: 40px; padding: 0 14px; border-radius: 999px; background: #fff; font-weight: 800; font-size: 14px; }

/* Heute bei euch */
.zeitzeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zeitkarte { background: var(--karte); border-radius: 18px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-height: 64px; }
.zeitkarte .wer { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text2); }
.zeitkarte .was { font-size: 15px; font-weight: 800; }
.gemeinsam-frei { grid-column: 1 / -1; background: var(--lila-hell); color: var(--lila-dunkel); border-radius: 16px; padding: 8px 12px; font-size: 14px; font-weight: 800; }

/* Stand-Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kachel { min-height: 84px; border-radius: 20px; background: var(--karte); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px; padding: 6px 2px; }
.kachel .symbol { width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.kachel .name { font-size: 12px; font-weight: 800; }
.marke-ton { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.ton-gut { background: var(--gut-bg); color: var(--gut-text); }
.ton-mittel { background: var(--mittel-bg); color: var(--mittel-text); }
.ton-rot { background: var(--rot-bg); color: var(--rot-text); }
.ton-info { background: var(--info-bg); color: var(--info-text); }
.ton-lila { background: var(--lila-hell); color: var(--lila); }
.ton-gelb { background: var(--gelb); color: var(--gelb-text); }

/* Listen */
.zeile { min-height: 60px; background: var(--karte); border-radius: 20px; display: flex; align-items: center; gap: 12px; padding: 7px 7px 7px 10px; width: 100%; text-align: left; }
.zeile .symbol { width: 38px; height: 38px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zeile .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.zeile .titel { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.zeile .unter { font-size: 12px; color: var(--text2); }
.punkte { font-size: 13px; font-weight: 800; color: var(--text2); background: #EFEDF7; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.punkte.doppelt { color: #fff; background: var(--orange); }
.haken { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #D6D0EE; background: #fff; display: flex; align-items: center;
  justify-content: center; color: #9C95C2; flex-shrink: 0; }
.haken:active { background: var(--gut-bg); color: var(--gut-text); border-color: var(--gut-text); }
.leer-hinweis { text-align: center; color: var(--text2); padding: 14px; font-size: 14px; }

/* Hauptknopf */
.haupt-leiste { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--unten) + 80px); width: min(444px, calc(100% - 36px));
  display: flex; gap: 10px; z-index: 20; }
.knopf-haupt { flex: 1; height: 56px; border-radius: 20px; background: var(--orange); color: #fff; font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 19px;
  display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px rgba(217, 72, 15, .28); }
.knopf-haupt:active, .knopf-mikro:active { transform: scale(.97); }
.knopf-mikro { flex: 0 0 56px; height: 56px; border-radius: 20px; background: var(--lila); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(91, 60, 196, .3); }
.knopf { min-height: 48px; padding: 0 18px; border-radius: 16px; background: var(--lila); color: #fff; font-weight: 800; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.knopf.zweit { background: var(--lila-hell); color: var(--lila); }
.knopf.orange { background: var(--orange); }
.knopf.rot { background: var(--rot-bg); color: var(--rot-text); }
.knopf.breit { width: 100%; }
.knopf:disabled { opacity: .5; }

/* Navigation */
nav.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: #fff; padding: 4px 8px calc(var(--unten) + 6px);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
nav.leiste button { min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text2); position: relative; }
nav.leiste button[aria-current="page"] { color: var(--lila); }
nav.leiste span { font-size: 11px; font-weight: 800; }
nav.leiste .zaehler { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--orange); color: #fff;
  font-size: 11px; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.nav-innen { max-width: 480px; margin: 0 auto; display: contents; }

/* Hinweise */
.hinweis { background: var(--karte); border-radius: 18px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; }
.hinweis .text { flex: 1; font-size: 14px; }
.hinweis.lila { background: var(--lila-hell); color: var(--lila-dunkel); }

/* Blätter (Bottom Sheets) */
.schleier { position: fixed; inset: 0; background: rgba(36, 33, 59, .42); z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  animation: einblenden .18s ease-out; }
.blatt { width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--grund);
  border-radius: 26px 26px 0 0; padding: 10px 18px calc(var(--unten) + 22px); animation: hoch .22s cubic-bezier(.2, .8, .3, 1); }
.blatt .griff { width: 100%; height: 22px; margin: -6px 0 4px; position: relative; touch-action: none; }
.blatt .griff::before { content: ""; position: absolute; left: 50%; top: 8px; width: 44px; height: 5px; margin-left: -22px; border-radius: 3px; background: #CFC8EA; }
.blatt-kopf { touch-action: none; }
.blatt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.blatt-kopf h2 { font-size: 21px; }
.zu { width: 44px; height: 44px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
@keyframes hoch { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

.raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.raster button { min-height: 92px; border-radius: 18px; background: var(--karte); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 8px 6px; text-align: center; font-size: 13px; font-weight: 800; line-height: 1.2; }
.raster button .symbol { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.raster button .p { font-size: 11px; color: var(--gut-text); }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl button { min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--karte); font-weight: 800; font-size: 15px; }
.wahl button[aria-pressed="true"] { background: var(--lila); color: #fff; }
.zaehlwerk { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 10px 0 16px; }
.zaehlwerk button { width: 56px; height: 56px; border-radius: 50%; background: #fff; font-size: 28px; font-family: "Fredoka", sans-serif; }
.zaehlwerk .zahl { font-size: 46px; min-width: 60px; text-align: center; }
.feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.feld label { font-size: 13px; color: var(--text2); }
.feld input, .feld select, .feld textarea { min-height: 48px; border-radius: 14px; border: 2px solid var(--linie); background: #fff; padding: 10px 14px; font-weight: 700; width: 100%; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--lila); }
.reihe { display: flex; gap: 10px; }
.reihe > * { flex: 1; }
.schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.schalter input { width: 26px; height: 26px; accent-color: var(--lila); }
.trenner { height: 1px; background: var(--linie); margin: 12px 0; }
.anleitung { font-size: 14px; color: var(--text2); margin: 0 0 10px; padding-left: 20px; }
.anleitung li { margin-bottom: 4px; }

/* Einkauf */
.eingabe { display: flex; gap: 8px; }
.eingabe input { flex: 1; min-height: 52px; border-radius: 16px; border: 2px solid var(--linie); background: #fff; padding: 0 14px; font-weight: 800; }
.eingabe input:focus { outline: none; border-color: var(--lila); }
.eingabe button { width: 52px; height: 52px; border-radius: 16px; background: var(--lila); color: #fff; display: flex; align-items: center; justify-content: center; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex-shrink: 0; min-height: 36px; padding: 0 12px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 800; color: var(--text2); }
.chips.umbruch { flex-wrap: wrap; overflow: visible; }
.chips.umbruch button { min-height: 38px; color: var(--text); font-size: 14px; }
.posten { min-height: 52px; background: var(--karte); border-radius: 16px; display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 6px; }
.posten .kasten { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.posten .kasten span { width: 26px; height: 26px; border-radius: 8px; border: 2.5px solid #C9C1E8; display: flex; align-items: center; justify-content: center; color: #fff; }
.posten.erledigt .kasten span { background: var(--gut-text); border-color: var(--gut-text); }
.posten .text { flex: 1; font-size: 16px; font-weight: 800; }
.posten.erledigt .text { text-decoration: line-through; color: var(--text2); }
.posten .weg-knopf { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #B3ACD3; }
.bereich-name { font-size: 13px; color: var(--text2); margin: 6px 0 0 4px; }

/* Gemeinsam */
.woche { display: flex; flex-direction: column; gap: 6px; }
.tag { background: var(--karte); border-radius: 16px; padding: 9px 12px; display: flex; flex-direction: column; gap: 5px; }
.tag.heute { outline: 2px solid var(--lila); }
.tag-kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.tag-frei { background: var(--lila-hell); color: var(--lila-dunkel); border-radius: 12px; padding: 7px 10px; font-size: 14px; font-weight: 800; }
.tag-frei.keine { background: #F1EEFB; color: var(--text2); font-weight: 700; }
.tag-person { display: grid; grid-template-columns: 10px 44px 1fr; align-items: baseline; gap: 6px; font-size: 14px; line-height: 1.3; }
.tag-person .wer { color: var(--text2); font-size: 13px; font-weight: 700; }
.tag-person .was { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.termin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.termin-chips span { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 9px; }
.idee { min-height: 64px; background: var(--karte); border-radius: 20px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; }
.idee .mitte { flex: 1; min-width: 0; }
.idee .titel { font-size: 15px; font-weight: 800; }
.herzen { display: flex; gap: 2px; }
.herz { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.match { font-size: 11px; font-weight: 800; color: #fff; background: var(--lila); border-radius: 999px; padding: 2px 8px; }

/* Rudel */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.person { border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.person .zahl { font-size: 34px; line-height: 1; }
.fortschritt { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .6); overflow: hidden; }
.fortschritt i { display: block; height: 100%; border-radius: 4px; }
.verlauf-zeile { min-height: 56px; display: flex; align-items: center; gap: 10px; background: var(--karte); border-radius: 16px; padding: 6px 6px 6px 12px; }
.verlauf-zeile .mitte { flex: 1; min-width: 0; }
.verlauf-zeile .titel { font-size: 14px; font-weight: 800; }
.mini { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text2); }
.mini.an { color: #E0457B; }
.menue { display: flex; flex-direction: column; gap: 8px; }

/* Anmeldung */
.anmeldung { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.anmeldung .rudi { width: 140px; height: 140px; border-radius: 50%; background: #fff; margin: 0 auto; display: block; border: 8px solid var(--lila); }
.anmeldung h1 { text-align: center; font-size: 34px; color: var(--lila); }
.anmeldung p { text-align: center; margin: 0; color: var(--text2); }
.fehler { color: var(--rot-text); background: var(--rot-bg); border-radius: 12px; padding: 8px 12px; font-size: 14px; }

/* Toast, Jubel, Konfetti */
#toast { position: fixed; left: 50%; bottom: calc(var(--unten) + 150px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--text); color: #fff; border-radius: 16px; padding: 10px 10px 10px 16px; display: flex; align-items: center; gap: 12px;
  font-size: 15px; z-index: 80; transition: all .2s ease; max-width: calc(100% - 36px); }
#toast.an { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast button { min-height: 36px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 800; font-size: 14px; }
#konfetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }
.jubel { position: fixed; left: 50%; bottom: calc(var(--unten) + 140px); width: 190px; transform: translate(-50%, 30px) scale(.6); opacity: 0;
  z-index: 85; pointer-events: none; transition: all .35s cubic-bezier(.2, 1.4, .4, 1); }
.jubel.an { transform: translate(-50%, 0) scale(1); opacity: 1; }
.jubel .plus { position: absolute; top: -8px; right: -16px; background: var(--orange); color: #fff; font-family: "Fredoka", sans-serif; font-size: 22px;
  border-radius: 999px; padding: 4px 12px; transform: rotate(8deg); }

/* Rudi bedankt sich (großes Danke nach jeder Aufgabe) */
.danke { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(67, 41, 154, 0); transition: background .25s ease; overflow: hidden; cursor: pointer; }
.danke.an { background: rgba(58, 34, 140, .88); }
.danke.weg { opacity: 0; transition: opacity .3s ease; }
.danke-karte { position: relative; text-align: center; color: #fff; max-width: 360px; transform: scale(.3); opacity: 0; }
.danke.an .danke-karte { animation: plopp .7s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.danke-rudi { width: 240px; height: 240px; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .28)); transform-origin: 50% 90%; }
.danke.an .danke-rudi { animation: wackeln 1.1s ease-in-out .55s 2; }
.danke-hops.an .danke-rudi { animation: huepfen .55s ease-in-out .35s 4; }
.danke-schlabber.an .danke-rudi { animation: schlabbern .5s ease-in-out .5s 3; }
.danke-gross { font-family: "Fredoka", sans-serif; font-weight: 700; font-size: 44px; line-height: 1.05; margin-top: 4px; text-shadow: 0 3px 0 rgba(0, 0, 0, .14); }
.danke-text { font-size: 18px; font-weight: 800; margin-top: 8px; line-height: 1.3; }
.danke-punkte { display: inline-block; margin-top: 14px; background: var(--gelb); color: var(--gelb-text); font-family: "Fredoka", sans-serif;
  font-weight: 600; font-size: 22px; border-radius: 999px; padding: 4px 18px; }
.danke.an .danke-punkte { animation: puls .9s ease-in-out .75s 2; }
.danke-ziel { margin: 16px auto 0; width: 270px; font-size: 13px; color: #EDE8FF; }
.danke-balken { height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .22); overflow: hidden; margin-bottom: 6px; }
.danke-balken i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--julia), var(--gelb), var(--lukas));
  transition: width 1.2s cubic-bezier(.2, .8, .3, 1); }
.danke-extra { margin-top: 12px; font-size: 16px; font-weight: 800; color: var(--gelb); }
.danke-zurueck { margin-top: 14px; color: rgba(255, 255, 255, .78); font-size: 13px; text-decoration: underline; min-height: 40px; padding: 0 10px; }
.danke-herzen { position: absolute; inset: 0; pointer-events: none; }
.danke-herzen .steigt { position: absolute; bottom: -80px; opacity: 0; animation-name: steigen; animation-timing-function: linear; animation-fill-mode: forwards; }
.danke-herzen .platzen { position: absolute; left: 50%; top: 40%; opacity: 0; animation-name: platzen; animation-timing-function: cubic-bezier(.15, .7, .3, 1); animation-fill-mode: forwards; }
.danke-glanz { position: absolute; left: 50%; top: 125px; font-size: 230px; line-height: 1; transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; z-index: 0; }
.danke.an .danke-glanz { animation: glanz 1.4s ease-out .1s forwards, schlagen 1.1s ease-in-out 1.5s infinite; }
.danke-karte .danke-rudi { position: relative; z-index: 1; width: 270px; height: 270px; }
.danke-karte > div, .danke-karte > button { position: relative; z-index: 1; }
@keyframes platzen { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.35) rotate(var(--r)); opacity: 0; } }
@keyframes glanz { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(1.18); opacity: .5; } 100% { transform: translate(-50%, -50%) scale(1); opacity: .38; } }
@keyframes schlagen { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.08); } }
.schlabber-wisch { position: absolute; left: -40vmax; top: 30%; width: 180vmax; height: 50vmax; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 150, 180, .6), rgba(255, 150, 180, 0) 68%); transform: rotate(-22deg) translateX(-120%);
  animation: wisch .95s ease-out .3s forwards; pointer-events: none; }
.kuss-flug { position: absolute; top: 110px; left: 50%; font-size: 34px; opacity: 0; animation: kussflug 1.4s ease-out .65s forwards; }
.danke-ziel span, .danke-text { overflow-wrap: anywhere; }
@keyframes plopp { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.07); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes wackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes huepfen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-28px); } }
@keyframes schlabbern { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.08) translateY(8px); } }
@keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes steigen { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--x), -118vh) scale(1.25) rotate(18deg); opacity: 0; } }
@keyframes wisch { to { transform: rotate(-22deg) translateX(120%); } }
@keyframes kussflug { 0% { transform: translate(-50%, 0) scale(.4); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(70px, -150px) scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .danke .danke-karte, .danke .danke-rudi, .danke .danke-punkte { animation: none !important; transform: none; opacity: 1; }
  .danke-herzen, .schlabber-wisch, .kuss-flug, .danke-glanz { display: none; }
}

.termin-chips .chip-knopf { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 9px; min-height: 28px; }

.kachel.schnell { min-height: 98px; }
.kachel.schnell .name { text-align: center; line-height: 1.15; padding: 0 4px; }

/* Lila Band hinter Uhrzeit und Akku (iPhone: Statusleiste durchsichtig, weiße Schrift) */
.oben-band { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--lila); z-index: 200; pointer-events: none; }
/* Fenster und Schleier beginnen unter dem lila Balken, sonst färbt der Schleier ihn grau */
.schleier { top: env(safe-area-inset-top, 0px); }
.blatt { max-height: calc(88vh - env(safe-area-inset-top, 0px)); }

/* Mistaufgabe des Tages */
.mist-karte { background: #fff; border: 2px dashed #E9C987; border-radius: 22px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mist-kopf { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 17px; color: var(--gelb-text); }
.mist-text { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.2; }
.mist-frage { margin: 0; font-size: 15px; }
.mist-partner { margin: 0; }

.legende-ampel { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 0; font-size: 12px; color: var(--text2); }
.legende-ampel span { display: inline-flex; align-items: center; gap: 5px; }
.legende-ampel i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.legende-ampel i.ton-rot { background: #F2A0AD; } .legende-ampel i.ton-mittel { background: #F7C27F; }
.legende-ampel i.ton-gut { background: #8FD9B6; } .legende-ampel i.ton-lila { background: #C9BCF5; }

/* Rudis Glücks-Barometer */
.barometer { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: 13px; color: var(--gelb-text); }
.barometer-name { font-weight: 800; }
.herzreihe { display: inline-flex; gap: 2px; font-size: 18px; letter-spacing: 1px; }
.herzreihe span.an { animation: herzschlag 1.6s ease-in-out infinite; display: inline-block; }
.herzreihe span:nth-child(2).an { animation-delay: .15s; } .herzreihe span:nth-child(3).an { animation-delay: .3s; }
.herzreihe span:nth-child(4).an { animation-delay: .45s; } .herzreihe span:nth-child(5).an { animation-delay: .6s; }
@keyframes herzschlag { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } }
.ring.trick img { animation: trick 1.8s ease-in-out infinite; }
@keyframes trick { 0%, 100% { transform: translateY(0) rotate(0); } 20% { transform: translateY(-8px) rotate(-6deg); } 40% { transform: translateY(0) rotate(0); } 60% { transform: translateY(-5px) rotate(6deg); } 80% { transform: translateY(0); } }
/* 10-Minuten-Runde */
.runde-karte { background: #fff; border: 2px dashed #C9BCF5; border-radius: 22px; padding: 14px 14px 14px 16px; display: flex; align-items: center; gap: 12px; }
.runde-karte .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.runde-karte b { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 17px; color: var(--lila); }
.runde-karte .leise { font-size: 14px; }
.runde-karte .knopf { flex: 0 0 auto; background: linear-gradient(90deg, #5B3CC4, #7B60D6); padding: 0 22px; }
.runde-uhr { font-size: 64px; text-align: center; color: var(--lila); line-height: 1; margin: 4px 0 14px; }
.runde-uhr.knapp { color: var(--orange); animation: puls 1s ease-in-out infinite; }
.zeile.runde-erledigt { background: var(--gut-bg); }
.zeile.runde-erledigt .haken { background: var(--gut-text); color: #fff; border-color: var(--gut-text); }
/* Sticker-Album */
.album { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sticker { background: #fff; border-radius: 18px; padding: 8px 4px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 110px; }
.sticker-bild { position: relative; width: 62px; height: 62px; border-radius: 50%; background: #F1EEFB; display: flex; align-items: center; justify-content: center; overflow: visible; }
.sticker-bild img { width: 58px; height: 58px; object-fit: contain; filter: grayscale(1); opacity: .35; }
.sticker.hat .sticker-bild { background: var(--gelb); }
.sticker.hat .sticker-bild img { filter: none; opacity: 1; }
.sticker-bild b { position: absolute; right: -6px; bottom: -4px; background: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.12); color: var(--text2); }
.sticker-name { font-size: 11px; font-weight: 800; text-align: center; line-height: 1.15; color: var(--text2); }
.sticker.hat .sticker-name { color: var(--text); }
/* Wochenrückblick */
.rueckblick-karte { background: #fff; border: 2px solid var(--lila-hell); border-radius: 20px; padding: 12px 12px 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Ränge */
.rang-zeile { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 8px 12px 8px 8px; }
.rang-zeile.hier { outline: 2px solid var(--lila); }
.rang-zeile img { object-fit: contain; flex-shrink: 0; }
.rang-zeile .titel { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 18px; }
.rang-marke { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 800; color: #24213B; border-radius: 999px; padding: 2px 8px; }
button.person { border: 0; font: inherit; cursor: pointer; }

.rang-mini { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 14px; font-weight: 800; }
.rang-mini img { object-fit: contain; flex-shrink: 0; }

/* Mein Tag */
.plan-zeile { min-height: 54px; background: var(--karte); border-radius: 16px; display: flex; align-items: center; gap: 10px; padding: 5px 6px; }
.plan-zeile .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-zeile .titel { font-size: 15px; font-weight: 800; }
.plan-zeile .unter { font-size: 12px; color: var(--text2); }
.plan-zeile.erledigt .titel { text-decoration: line-through; color: var(--text2); }
.plan-zeile.erledigt .haken { background: var(--gut-text); color: #fff; border-color: var(--gut-text); }
/* Heute geschafft */
.geschafft-spalte { border-radius: 20px; padding: 12px 12px 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.geschafft-spalte.julia { background: var(--julia-hell); color: var(--julia-text); }
.geschafft-spalte.lukas { background: var(--lukas-hell); color: var(--lukas-text); }
.geschafft-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 14px; font-weight: 800; }
.geschafft-kopf b { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 22px; line-height: 1; }
.geschafft-zahl { font-size: 13px; font-weight: 700; opacity: .85; margin-bottom: 2px; }
.geschafft-zeile { display: flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 0; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.2; }
.geschafft-zeile + .geschafft-zeile { border-top: 1px solid rgba(36, 33, 59, .08); }
.geschafft-zeile .titel { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.geschafft-zeile .herz { flex: 0 0 auto; width: 36px; height: 36px; margin: -3px -8px -3px 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--text2); }
.geschafft-zeile .herz.an { color: #E0457B; }
.geschafft-boni { font-size: 13px; font-weight: 800; margin-top: 4px; }
/* Fit */
.fit-emoji { font-size: 26px; line-height: 1; }
.fit-emoji.klein { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; }
.essen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.essen { min-height: 56px; border-radius: 18px; background: var(--karte); display: flex; align-items: center; gap: 10px; padding: 8px 12px; text-align: left; border: 2px solid transparent; }
.essen .name { flex: 1; font-size: 14px; font-weight: 800; line-height: 1.2; }
.essen .p { font-size: 12px; font-weight: 800; color: var(--gut-text); background: var(--gut-bg); border-radius: 999px; padding: 2px 8px; }
.essen.an { background: var(--gut-bg); border-color: var(--gut-text); }
.essen.an .p { background: var(--gut-text); color: #fff; }
.sport-vorschau { font-family: "Fredoka", sans-serif; font-weight: 600; font-size: 22px; color: var(--lila); text-align: center; margin: 4px 0 12px; }
/* Ideen */
.mikro-box { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px 0 16px; }
.mikro-knopf { width: 96px; height: 96px; border-radius: 50%; background: var(--lila); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(91, 60, 196, .35); }
.mikro-knopf.an { background: #E0457B; animation: mikro-puls 1.2s ease-in-out infinite; }
.mikro-knopf:disabled { opacity: .5; }
@keyframes mikro-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 69, 123, .45); } 50% { box-shadow: 0 0 0 16px rgba(224, 69, 123, 0); } }
.mikro-zeit { font-size: 14px; font-weight: 800; color: var(--text2); text-align: center; }
.idee-warte { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-weight: 800; color: var(--lila); }
.idee-warte img { border-radius: 50%; animation: trick 1.8s ease-in-out infinite; }
.idee-ergebnis { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.idee-zeile { display: flex; align-items: center; gap: 10px; background: var(--karte); border-radius: 16px; padding: 6px 6px 6px 12px; min-height: 52px; }
.idee-zeile .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.idee-zeile .titel { font-size: 15px; font-weight: 800; }
.idee-zeile .unter { font-size: 12px; color: var(--text2); }
.idee-zeile.zurueck { opacity: .55; }
.idee-zeile.zurueck .titel { text-decoration: line-through; }
.idee-art { font-size: 22px; }
.idee-karte { background: var(--karte); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.idee-karte .titel { font-weight: 800; font-size: 15px; }
.idee-text { font-size: 14px; }
.idee-knoepfe { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.idee-knoepfe .knopf { min-height: 40px; padding: 0 12px; font-size: 14px; flex: 1; }
/* Urlaube (Gemeinsam): Reise-Karten, Reise-Blatt mit Packliste und Rudis Checkliste */
.urlaub-karte { width: 100%; min-height: 68px; background: var(--karte); border-radius: 20px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; text-align: left; }
.urlaub-karte.laeuft { outline: 2px solid var(--gut-text); }
.urlaub-karte .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.urlaub-karte .titel { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.urlaub-karte .unter { font-size: 12px; color: var(--text2); overflow-wrap: anywhere; }
.urlaub-zeichen { width: 40px; height: 40px; border-radius: 13px; background: #DDF1FF; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.urlaub-symbol { font-size: 20px; }
.breit-zeile { width: 100%; text-align: left; }
.urlaub-blatt { display: flex; flex-direction: column; gap: 14px; }
.urlaub-blatt [hidden] { display: none !important; }
.urlaub-kopf { display: flex; flex-direction: column; gap: 10px; }
.urlaub-info { margin: -6px 0 0; font-size: 15px; line-height: 1.55; }
.urlaub-weg { display: flex; flex-direction: column; gap: 10px; }
.urlaub-weg p { margin: 0; font-size: 15px; line-height: 1.4; }
.urlaub-weg.angebot { background: var(--gelb); }
.urlaub-weg .reihe .knopf { padding: 0 10px; font-size: 15px; }
.urlaub-notiz { white-space: pre-line; font-size: 15px; overflow-wrap: anywhere; }
.schalter-unter { display: block; font-size: 13px; color: var(--text2); margin-top: 2px; line-height: 1.35; }
.pack-stand { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text2); margin-bottom: 6px; }
.pack-stand span { white-space: nowrap; }
.pack-balken { flex: 1; height: 8px; border-radius: 4px; background: var(--linie); overflow: hidden; }
.pack-balken i { display: block; height: 100%; border-radius: 4px; background: var(--gut-text); transition: width .3s ease; }
.pack-liste { display: flex; flex-direction: column; gap: 6px; }
.posten.pack .text { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.posten .pack-hinweis { display: block; font-size: 12px; font-weight: 700; color: var(--text2); margin-top: 2px; line-height: 1.3; }
.posten .pack-wer { width: 10px; height: 10px; }
.vorschlag-kopf { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text2); margin: 6px 0 -2px 4px; }
.vorschlag-kopf .link { min-height: 32px; font-size: 13px; padding: 0 2px; }
.feld textarea.live { border-color: #E0457B; background: #FFF7FA; min-height: 140px; font-size: 17px; }
.knopf.bereit { animation: bereit-puls 1.4s ease-in-out infinite; }
@keyframes bereit-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 60, 196, .45); } 50% { box-shadow: 0 0 0 10px rgba(91, 60, 196, 0); } }
#az-tage button[aria-pressed="false"] { background: var(--lila-hell); color: var(--lila); }
/* Packlisten zum Wiederverwenden und Schritte vom iPhone */
.kopf-links { display: flex; gap: 14px; align-items: baseline; }
.packlisten-teil { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.packlisten-teil:empty { display: none; }
.packlisten-teil .chips { width: 100%; }
.posten.vorlage { padding-left: 16px; }
.posten.vorlage .text { font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.schritte-spalte { border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.schritte-spalte.julia { background: var(--julia-hell); color: var(--julia-text); }
.schritte-spalte.lukas { background: var(--lukas-hell); color: var(--lukas-text); }
.schritte-spalte .wer { font-size: 13px; }
.schritte-spalte .zahl { font-size: 30px; line-height: 1.05; }
.schritte-spalte .pack-balken { background: rgba(255, 255, 255, .75); margin: 4px 0 2px; flex: none; }
.schritte-spalte .pack-balken i { background: currentColor; }
.schritte-schritt { margin-bottom: 12px; }
.schritte-schritt .bereich-name { margin: 0 0 6px; color: var(--lila-dunkel); font-weight: 800; }
.schritte-schritt .anleitung li { margin-bottom: 6px; }
.plan-zeile.bitte .bitte-stand { width: 34px; text-align: center; font-size: 20px; flex-shrink: 0; }
/* Einrichtung */
.farbwahl { display: flex; gap: 10px; flex-wrap: wrap; }
.farbwahl button { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--linie); }
.farbwahl button[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--lila); }
.einrichtung .wahl[data-feld] button { min-height: 42px; }

/* 👉 Stupser (19.10.) */
.stups-karte { background: var(--karte); border: 2px solid var(--lila-hell); border-radius: 20px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.stups-kopf { display: flex; align-items: center; gap: 10px; }
.stups-kopf .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stups-kopf .mini { margin: -6px -6px -6px 0; }
.stups-finger { font-size: 26px; line-height: 1; animation: stupsen 1.6s ease-in-out 3; }
@keyframes stupsen { 0%, 60%, 100% { transform: translateX(0); } 70% { transform: translateX(6px); } 80% { transform: translateX(0); } 90% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .stups-finger { animation: none; } }
.stups-text { margin: 0; font-size: 16px; font-weight: 800; color: var(--lila-dunkel); }
.stups-thema { margin: 0; font-size: 15px; }
.stups-liste { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.stups-wahl { min-height: 56px; background: var(--grund); border-radius: 16px; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; width: 100%; text-align: left; }
.stups-wahl:active { transform: scale(.98); }
.stups-wahl .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stups-wahl .titel { font-size: 15px; font-weight: 800; }
.stups-wahl .unter { font-size: 12px; color: var(--text2); }
.stups-zeichen { width: 36px; height: 36px; border-radius: 12px; background: var(--karte); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.stups-los { font-size: 20px; }
.mini.stups { font-size: 20px; }
.stups-karte .reihe { flex-wrap: wrap; }
.stups-karte .reihe .knopf { flex: 1 1 auto; white-space: nowrap; padding: 0 14px; font-size: 15px; }

/* 📅 Nachtragen (19.10.) */
.tag-wahl { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.tag-wahl .wahl button { min-height: 38px; padding: 0 13px; font-size: 14px; }
.tag-datum { min-height: 44px; border: 2px solid var(--linie); border-radius: 14px; padding: 0 12px; background: var(--karte); width: 100%; }
.tag-hinweis { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--gelb); color: var(--gelb-text); font-size: 14px; font-weight: 800; }
.blatt .tag-hinweis + .leise { margin-top: 10px !important; }

a.knopf { text-decoration: none; display: flex; align-items: center; justify-content: center; }