:root {

    --bg-color: #fafafa;

    --box-size: 3vw;
    --box-gap: 0.8vw;
    --month-gap: 2vw;

    --c-border: #b0b0b0;
    --c-today: #676767; /* Hervorhebung Heute */
    --c-empty: #fafafa;

    --mood-relaxed: #a8e6cf;
    --mood-neutral: #e6e9e2;
    --mood-neutral: #f8f8d3;
    --mood-tense: #ffd3b6;
    --mood-dispute: #ff8b94;

    --mood-relaxed: #00edbd;
    --mood-neutral: #84abba;
    --mood-neutral: #83aab8;
    --mood-tense: #ffe9ac;
    --mood-tense: #ffdc7a;
    --mood-tense: #ffa075;
    --mood-dispute: #f9b9ff;
    --mood-dispute: #fa00af;
}

body {
  font-family: sans-serif;
  padding: 1vw;
  background: var(--bg-color);
}

/* --- Layout Kalender --- */
.calendar-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--month-gap);
    align-items: flex-start;
    justify-content: space-evenly;
}

/* Container für einen Monat */
.month-block {
    display: grid;
    /* 7 Spalten (Mo-So) */
    grid-template-columns: repeat(7, var(--box-size));
    gap: var(--box-gap);
    /* Namen der Monate ausblenden laut Anforderung, 
       aber Container bleiben für Struktur */
}

/* Die einzelne Tages-Box */
.box {
    width: var(--box-size);
    height: var(--box-size);
    border: 0.1vw solid var(--c-border);
    background-color: var(--c-empty);
    box-sizing: border-box;
}

/* Leere Platzhalter am Monatsanfang (unsichtbar, aber belegen Grid-Platz) */
.box-empty {
    border: none;
    background: transparent;
    pointer-events: none;
}

/* --- Status Klassen --- */

/* Zeitbezug */
.box--past {
    /* Optional: Visuelle Markierung für Vergangenheit, falls gewünscht */
}
.box--today {
  border: 0.2vw dashed var(--c-today);
  z-index: 10;
}

/* MOOD (Beispiel-Farben) */
.box--mood-relaxed { background-color: var(--mood-relaxed); } /* Grünlich */
.box--mood-neutral { background-color: var(--mood-neutral); } /* Gelblich */
.box--mood-tense   { background-color: var(--mood-tense); } /* Orange */
.box--mood-dispute { background-color: var(--mood-dispute); } /* Rot */

@keyframes didHappen {
  0% { rotate: 0deg; }
  25% { rotate: 1080deg; }
  100% { rotate: 1080deg; }
}

/* ACTION (Optional: z.B. dickerer Rahmen oder Muster) */
.box--action-didhappen {
    /* Beispiel: Ein kleiner Punkt in der Mitte oder dunklerer Rahmen */
    position: relative;
    animation-name: didHappen;
    animation-duration: 9s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}
/*.box--action-didhappen::after {
    content: '';
    position: absolute;
    top: 20%; left: 20%; right: 20%; bottom: 20%;
    background-color: rgba(0,0,0,0.2);
}*/

.box--no {
  background-image: url('/cross.svg');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
}

.box--red {
  border-radius: 40%;
}

.box--pot-5 { scale: 1.2; }
.box--pot-4 { scale: 1; }
.box--pot-3 { scale: 0.9; }
.box--pot-2 { scale: 0.7; }
.box--pot-1 { scale: 0.5; }
.box--pot-0 { scale: 0.3; }

/* --- Stream View (JS Toggle) --- */

.button-holder {
  position:fixed;
  right: 1rem;
  bottom: 1rem;
}

/* Wenn body die Klasse .view-stream hat */
body.view-stream .calendar-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--box-gap); /* Nur kleiner Gap zwischen allen Boxen */
}

body.view-stream .month-block {
    display: contents; /* Löst den Grid-Container auf, Kinder floaten im Eltern-Flex */
}

body.view-stream .box-empty {
    display: none; /* Platzhalter im Stream-Modus ausblenden */
}

/* --- Backend Styles --- */
.nav-bar { font-size: 1.5rem; margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center; }
.nav-link { text-decoration: none; padding: 0.5rem; background: #eee; }
.form-group { margin-bottom: 1rem; }
.info-badge { 
    display: inline-block; width: 1.2rem; height: 1.2rem; 
    background: #ddd; border-radius: 50%; text-align: center; 
    font-size: 0.8rem; line-height: 1.2rem; cursor: help; margin-left: 0.5rem;
}