* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.app {
  width: 100%;
  height: 100svh;
  padding: 12px;
  overflow: hidden;
}

.wochenleiste {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}

body {
    background: #001817;
}

.app {
    position: relative;
    width: 100%;
    height: 100svh;
    box-sizing: border-box;
    padding: 20px 18px;
    overflow: hidden;

    background: linear-gradient(
        180deg,
        #001412 0%,
        #063c39 48%,
        #021b1b 100%
    );

    border: 3px solid #d5e2e3;
    border-radius: 38px;

    box-shadow:
        inset 0 0 0 3px #173b3b,
        inset 0 0 0 6px #e6ffff,
        inset 0 0 0 8px #001817,
        inset 0 0 16px #00fff080,
        0 0 12px #00fff055;
}

.app::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 29px;
    pointer-events: none;
    z-index: 2;

    background:
        radial-gradient(ellipse 18px 5px at 25% 0%,
            #ffffff 0%, #00fff2 35%, transparent 100%),
        radial-gradient(ellipse 18px 5px at 75% 0%,
            #ffffff 0%, #00fff2 35%, transparent 100%),
        radial-gradient(ellipse 18px 5px at 25% 100%,
            #ffffff 0%, #00fff2 35%, transparent 100%),
        radial-gradient(ellipse 18px 5px at 75% 100%,
            #ffffff 0%, #00fff2 35%, transparent 100%),
        radial-gradient(ellipse 5px 18px at 0% 25%,
            #ffffff 0%, #00fff2 35%, transparent 100%),
        radial-gradient(ellipse 5px 18px at 100% 25%,
            #ffffff 0%, #00fff2 35%, transparent 100%),
        radial-gradient(ellipse 5px 18px at 0% 75%,
            #ffffff 0%, #00fff2 35%, transparent 100%),
        radial-gradient(ellipse 5px 18px at 100% 75%,
            #ffffff 0%, #00fff2 35%, transparent 100%);
}
.app {
    border: 3px solid #f0ffff;
    box-shadow:
        inset 0 0 0 3px #173b3b,
        inset 0 0 0 6px #e6ffff,
        inset 0 0 0 8px #001817,
        inset 0 0 16px #00fff080,
        0 0 8px #ffffffaa,
        0 0 18px #00fff099,
        0 0 30px #00fff044;
}
.app::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 32px;
    pointer-events: none;
    z-index: 3;

    background:
        radial-gradient(circle at 25% 0%, white 0 2px, #00fff2 3px, transparent 9px),
        radial-gradient(circle at 75% 0%, white 0 2px, #00fff2 3px, transparent 9px),
        radial-gradient(circle at 25% 100%, white 0 2px, #00fff2 3px, transparent 9px),
        radial-gradient(circle at 75% 100%, white 0 2px, #00fff2 3px, transparent 9px),
        radial-gradient(circle at 0% 25%, white 0 2px, #00fff2 3px, transparent 9px),
        radial-gradient(circle at 100% 25%, white 0 2px, #00fff2 3px, transparent 9px),
        radial-gradient(circle at 0% 75%, white 0 2px, #00fff2 3px, transparent 9px),
        radial-gradient(circle at 100% 75%, white 0 2px, #00fff2 3px, transparent 9px);
}
.app {
  height: calc(100dvh - env(safe-area-inset-bottom) - 24px);
  margin: 12px 0;
  padding: 20px 18px;
}

.kopfbereich {
  text-align: center;
  padding-top: 10px;
}

.app-titel {
  font-family: "Playball", cursive !important;
  font-size: 42px;
  font-style: normal;
  line-height: 1.1;
  color: #ffffff;
  text-shadow:
    2px 2px 2px #000000,
    0 0 8px #00ffff,
    0 0 18px #00ffff;
}

.titel-blume {
  font-size: 42px;
  color: #00ffff;
  text-shadow: 0 0 12px #00ffff;
}

/* ORIGINAL-SCHRIFT LADY SASSY DAY */
.app-titel {
  font-family: "Playball", cursive;
  font-weight: normal;
  letter-spacing: -1px;
  color: #b9e9e8;

  background: none;
  -webkit-text-fill-color: #b9e9e8;

  text-shadow:
    2px 3px 1px #001b1b,
    3px 5px 2px #000000,
    0 0 8px #00fff0,
    0 0 16px #00cfc9;

  filter: none;
}
.sassi-blume {
  display: block;
  width: 85%;
  max-width: 355px;
  height: auto;
  margin: 0 auto 10px;
}
.app-titel {
  display: block;
  width: 100%;
  margin: 0 auto;
  transform: translateY(20px);
  text-align: center;
  font-size: clamp(45px, 11.8vw, 59px);
  line-height: 0.95;
}
.letztes-s {
  display: inline-block;
  margin-left: -2px;
}

/* WILLKOMMENSBILDSCHIRM */
.versteckt {
  display: none !important;
}

.willkommen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  background: #001817;
  padding: 12px;
  color: #f5ffff;
}

.willkommen-rahmen {
  min-height: calc(100dvh - 24px);
  border: 4px double #cfffff;
  border-radius: 38px;
  box-shadow: 0 0 18px #00ffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px 18px;
  background: radial-gradient(
    ellipse at center,
    #07504d 0%,
    #043b39 45%,
    #001817 100%
  );
}

.willkommen-inhalt {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.willkommen h1,
.willkommen h2 {
  font-family: "Playball", cursive;
  font-weight: normal;
  color: #b9f9f5;
  text-shadow:
    2px 3px 1px #001b1b,
    0 0 12px #00ffff;
}

.willkommen h1 {
  font-size: clamp(34px, 8vw, 48px);
  line-height: 1.15;
  margin: 0;
}

.willkommen-blume {
  display: block;
  width: 90%;
  max-width: 350px;
  height: auto;
  margin: 15px auto 22px;
}

.willkommen p {
  font-size: 18px;
  line-height: 1.5;
  margin: 0 auto 24px;
}

.willkommen-trenner {
  color: #8fffff;
  font-size: 32px;
  margin-bottom: 18px;
  text-shadow: 0 0 12px #00ffff;
}

.willkommen h2 {
  font-size: 42px;
  margin: 0 0 22px;
}

#name-eingabe {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #4fffff;
  border-radius: 30px;
  background: #002e2d;
  color: white;
  font-size: 20px;
  outline: none;
  box-shadow: 0 0 12px #00ffff66;
}

#name-eingabe::placeholder {
  color: #c9dada;
  font-style: italic;
}

#name-speichern {
  display: block;
  width: 75%;
  margin: 28px auto 0;
  padding: 14px;
  border: 2px solid #bfffff;
  border-radius: 30px;
  background: linear-gradient(#00eeee, #006c70);
  color: white;
  font: 32px "Playball", cursive;
  box-shadow: 0 0 16px #00ffff;
  cursor: pointer;
}

/* EINSTELLUNGSRÄDCHEN */
.app {
  position: relative;
}

#einstellungen {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 10;
}

#einstellungen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* EINSTELLUNGSFENSTER */
#einstellungsfenster.versteckt {
  display: none;
}

#einstellungsfenster {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 15, 20, 0.75);
}

.einstellungen-inhalt {
  width: 100%;
  max-width: 360px;
  box-sizing: border-box;
  padding: 28px 22px;
  text-align: center;
  color: #eaffff;
  background: linear-gradient(
    160deg, #073b40, #001b20
  );
  border: 2px solid #aaffff;
  border-radius: 24px;
  box-shadow: 0 0 22px #00ffff88;
}

.einstellungen-inhalt h2 {
  font-family: "Playball", cursive;
  font-size: 36px;
  margin: 0 0 28px;
  color: #b9ffff;
  text-shadow: 0 0 12px #00ffff;
}

.einstellungen-inhalt label {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
}

#name-aendern {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid #aaffff;
  border-radius: 14px;
  background: #092e32;
  color: white;
  font-size: 18px;
  text-align: center;
}

.einstellungen-inhalt button {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  border: 1px solid #aaffff;
  border-radius: 18px;
  background: #07545a;
  color: white;
  font-size: 18px;
  cursor: pointer;
}
/* EINSTELLUNGEN RICHTIG VERSTECKEN */
#einstellungsfenster.versteckt {
  display: none !important;
}
/* WOCHENKALENDER */

.wochenkalender {
  position: relative;
  top: -20px;
}

.kalender-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px 0;
  color: white;
}

.kalender-navigation button {
  background: transparent;
  border: none;
  color: #8fffff;
  font-size: 24px;
  cursor: pointer;
}

#datumsbereich {
  font-size: 14px;
  text-align: center;
}

#kalenderwoche {
  color: #8fffff;
  font-size: 13px;
  white-space: nowrap;
}

.wochenleiste {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
}

.tageskarte {
  min-width: 0;
  padding: 12px 2px;
  text-align: center;
  color: white;
  background: #062d35;
  border: 1px solid #8fffff;
  border-radius: 12px;
}

.tageskarte.heute {
  box-shadow: 0 0 12px #00ffff;
  border: 2px solid #00ffff;
}

.tageskarte .tag-name {
  font-weight: bold;
  font-size: 15px;
}

.tageskarte .tag-datum {
  font-size: 11px;
  margin-top: 5px;
}


.tageskarte .tag-symbol {
  font-size: 7px;
  line-height: 1;
  margin-top: 6px;
}

.arbeitspunkt {
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #39FF14;
  border-radius: 50%;
}

.tag-kalender-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tag-zaehler-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.chaos-teiler {
  display: block;
  position: relative;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 130%;
  height: auto;
  margin: 20px auto;
}

#heutiges-chaos {
  margin-top: -148px;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: #ffffff;
  text-shadow:
    0 0 3px #00f5e9
}
#eintrag-hinzufuegen {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 56px;
  height: 56px;
  border: 2px solid #00ffff;
  border-radius: 14px;
  background: #073b40;
  color: #35d6ce;
  font-size: 32px;
  cursor: pointer;
  box-shadow: 0 0 12px #00ffff
}