/* MedManager – gemeinsame Einnahmegruppen */

.today-intake-group{
  border-bottom:1px solid var(--border);
  background:var(--surface)
}

.today-intake-group:last-child{
  border-bottom:0
}

.today-intake-group-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 24px;
  cursor:pointer;
  list-style:none;
  background:#f8fafc
}

.today-intake-group-summary::-webkit-details-marker{
  display:none
}

.today-intake-group-summary > div{
  display:grid;
  gap:4px
}

.today-intake-group-summary strong{
  font-size:1.05rem;
  font-weight:850
}

.today-intake-group-summary span{
  color:var(--muted);
  font-size:.82rem
}

.today-intake-group.is-relevant{
  box-shadow:inset 4px 0 0 var(--accent)
}

.today-intake-group.is-relevant
.today-intake-group-summary{
  background:#f3f8fc
}

.today-intake-group.is-relevant
.today-intake-group-summary strong{
  color:var(--accent)
}

.today-group-chevron{
  flex:0 0 auto;
  font-size:1.55rem !important;
  line-height:1;
  transition:transform .18s ease
}

.today-intake-group[open]
.today-group-chevron{
  transform:rotate(90deg)
}

.today-intake-group-body{
  border-top:1px solid var(--border)
}

.today-intake-group-body
.today-intake-card{
  padding-left:24px;
  padding-right:24px
}

@media(max-width:560px){
  .today-intake-group-summary{
    padding:17px 16px
  }

  .today-intake-group-summary strong{
    font-size:1rem
  }

  .today-intake-group-body
  .today-intake-card{
    padding-left:16px;
    padding-right:16px
  }
}

/* MedManager – Gruppenaktionen */
.today-group-controls{
  display:grid;
  gap:10px;
  padding:16px 24px;
  background:#f8fafc;
  border-bottom:1px solid var(--border)
}

.today-group-taken{
  width:100%;
  min-height:54px;
  border:0;
  border-radius:15px;
  background:var(--accent);
  color:#fff;
  font:inherit;
  font-size:1rem;
  font-weight:850;
  cursor:pointer
}

.today-group-taken:disabled{
  opacity:.65;
  cursor:wait
}

.today-group-details{
  width:100%;
  min-height:46px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#fff;
  color:var(--text);
  font:inherit;
  font-size:.9rem;
  font-weight:750;
  cursor:pointer
}

.today-group-complete{
  padding:12px 14px;
  border-radius:13px;
  background:#eaf7f0;
  color:var(--success);
  font-size:.88rem;
  font-weight:800;
  text-align:center
}

.today-group-items[hidden]{
  display:none
}

@media(max-width:560px){
  .today-group-controls{
    padding:14px 16px
  }

  .today-group-taken{
    min-height:56px;
    font-size:1.02rem
  }

  .today-group-details{
    min-height:48px
  }
}


/* MedManager - Tageszeit und Jahreszeit */

.today-intake-group-summary{
  min-height:78px
}

.today-group-summary-content{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0
}

.today-group-copy{
  display:grid;
  gap:4px;
  min-width:0
}

.today-group-copy strong{
  line-height:1.2
}

.today-group-copy span{
  line-height:1.35
}

.today-group-summary-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto
}

.today-period-visual{
  position:relative;
  flex:0 0 72px;
  width:72px;
  height:48px;
  overflow:hidden;
  border-radius:13px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35);
  isolation:isolate
}

.today-period-visual::before,
.today-period-visual::after{
  content:"";
  position:absolute;
  z-index:1;
  border-radius:50% 50% 0 0
}

.today-period-visual::before{
  left:-10px;
  bottom:-15px;
  width:58px;
  height:29px;
  background:#72a35a;
  transform:rotate(5deg)
}

.today-period-visual::after{
  right:-14px;
  bottom:-17px;
  width:67px;
  height:31px;
  background:#527f48;
  transform:rotate(-4deg)
}

.today-period-icon{
  position:absolute;
  z-index:2;
  top:5px;
  right:8px;
  font-size:1.4rem;
  line-height:1
}

/* Morgens */
.period-morning{
  background:
    linear-gradient(
      180deg,
      #ffd7aa 0%,
      #e8eff9 58%,
      #b8d8ee 100%
    )
}

/* Mittags */
.period-noon{
  background:
    linear-gradient(
      180deg,
      #9ed4ff 0%,
      #dff3ff 100%
    )
}

/* Abends */
.period-evening{
  background:
    linear-gradient(
      180deg,
      #718cc5 0%,
      #eda47f 60%,
      #f6d0a1 100%
    )
}

/* Nacht */
.period-night{
  background:
    linear-gradient(
      180deg,
      #152347 0%,
      #334d78 100%
    )
}

/* Sonderzeit */
.period-custom{
  background:
    linear-gradient(
      180deg,
      #dde5ed 0%,
      #f4f7fa 100%
    )
}

/* Jahreszeiten */
.season-spring::before{
  background:#83bd67
}

.season-spring::after{
  background:#5d9851
}

.season-summer::before{
  background:#73aa54
}

.season-summer::after{
  background:#4e8043
}

.season-autumn::before{
  background:#c78b43
}

.season-autumn::after{
  background:#95623b
}

.season-winter::before{
  background:#eef4f7
}

.season-winter::after{
  background:#d6e4eb
}

/* Leerer Zeitraum */
.today-intake-group.is-empty
.today-intake-group-summary{
  background:#fbfcfd
}

.today-intake-group.is-empty
.today-group-copy span{
  color:var(--muted)
}

.today-group-empty-state{
  padding:12px 14px;
  border-radius:13px;
  background:#f3f6f8;
  color:var(--muted);
  font-size:.88rem;
  font-weight:700;
  text-align:center
}

/* Zeitraum ausblenden */
.today-group-hide{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:1px solid var(--border);
  border-radius:50%;
  background:#fff;
  color:var(--muted);
  font:inherit;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer
}

.today-group-hide:hover{
  background:#f2f5f7;
  color:var(--text)
}

.today-group-hide:focus-visible{
  outline:3px solid rgba(33,103,155,.22);
  outline-offset:2px
}

@media(max-width:560px){
  .today-intake-group-summary{
    min-height:76px;
    gap:10px
  }

  .today-group-summary-content{
    gap:11px
  }

  .today-period-visual{
    flex-basis:64px;
    width:64px;
    height:44px;
    border-radius:12px
  }

  .today-period-icon{
    top:5px;
    right:7px;
    font-size:1.3rem
  }

  .today-group-copy strong{
    font-size:.98rem
  }

  .today-group-copy span{
    font-size:.78rem
  }

  .today-group-hide{
    width:32px;
    height:32px
  }
}

/* Ausgeblendete Tageszeiten wiederherstellen */
.today-hidden-periods{
  padding:14px 16px 6px;
  text-align:center
}

.today-hidden-periods button{
  border:0;
  background:transparent;
  color:var(--accent);
  font:inherit;
  font-size:.85rem;
  font-weight:750;
  cursor:pointer
}

.today-hidden-periods button:hover{
  text-decoration:underline
}

/* MedManager – Tageszeitkarten Mobile-Fix */
.today-intake-group-summary >
.today-group-summary-content{
  display:flex;
  align-items:center;
  gap:14px
}

.today-intake-group-summary:focus{
  outline:none
}

.today-intake-group-summary:focus-visible{
  outline:3px solid rgba(33,103,155,.20);
  outline-offset:-3px;
  border-radius:12px
}

.today-intake-group.is-empty
.today-group-chevron{
  display:none
}

@media(max-width:560px){
  .today-intake-group-summary >
  .today-group-summary-content{
    display:flex;
    align-items:center;
    gap:12px
  }
}

/* Leere Tageszeiten bleiben kompakt */
.today-intake-group.is-empty
.today-intake-group-body{
  display:none
}

.today-intake-group.is-empty
.today-intake-group-summary{
  cursor:default
}

/* Einheitliche MedManager-Tageszeitsymbole */
.today-period-symbol{
  position:absolute;
  z-index:3;
  display:block
}

/* Morgens: aufgehende Sonne */
.symbol-morning{
  left:27px;
  bottom:12px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#f6a623;
  box-shadow:
    0 -8px 0 -6px #f6a623,
    7px -5px 0 -6px #f6a623,
    -7px -5px 0 -6px #f6a623
}

/* Mittags: Sonne hoch am Himmel */
.symbol-noon{
  right:13px;
  top:9px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#f4b400;
  box-shadow:
    0 -8px 0 -6px #f4b400,
    0 8px 0 -6px #f4b400,
    8px 0 0 -6px #f4b400,
    -8px 0 0 -6px #f4b400,
    6px 6px 0 -6px #f4b400,
    -6px 6px 0 -6px #f4b400,
    6px -6px 0 -6px #f4b400,
    -6px -6px 0 -6px #f4b400
}

/* Abends: untergehende Sonne */
.symbol-evening{
  right:15px;
  bottom:10px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:#e87835
}

/* Nacht: Mond */
.symbol-night{
  right:14px;
  top:8px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:#ffd45c
}

.symbol-night::after{
  content:"";
  position:absolute;
  top:-3px;
  left:7px;
  width:19px;
  height:19px;
  border-radius:50%;
  background:#1d315d
}

.symbol-custom{
  right:14px;
  top:12px;
  width:15px;
  height:15px;
  border:3px solid #64748b;
  border-radius:50%
}

@media(max-width:560px){
  .symbol-morning{
    left:23px
  }
}

/* MedManager – Feinschliff Tageszeitgrafiken */

/* Morgens: Sonne am Horizont */
.symbol-morning{
  left:28px;
  bottom:7px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#f5a623;
  box-shadow:none
}

.symbol-morning::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      #f5a623 0deg 5deg,
      transparent 5deg 45deg
    );
  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 11px,
      #000 12px
    );
  mask:
    radial-gradient(
      circle,
      transparent 0 11px,
      #000 12px
    )
}

/* Mittags: klare Sonne */
.symbol-noon{
  right:16px;
  top:11px;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#f5b400;
  box-shadow:none
}

.symbol-noon::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      #f5b400 0deg 5deg,
      transparent 5deg 45deg
    );
  -webkit-mask:
    radial-gradient(
      circle,
      transparent 0 12px,
      #000 13px
    );
  mask:
    radial-gradient(
      circle,
      transparent 0 12px,
      #000 13px
    )
}

/* Abends: Sonne tiefer am Horizont */
.symbol-evening{
  right:18px;
  bottom:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#e87535
}

/* Ausblenden bewusst als Nebenfunktion */
.today-group-hide{
  opacity:.72
}

.today-group-hide:hover,
.today-group-hide:focus-visible{
  opacity:1
}

/* MedManager – hochwertige Tageszeit-Szenen */
.today-period-visual{
  flex-basis:84px;
  width:84px;
  height:56px;
  border-radius:16px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 2px 7px rgba(15,23,42,.08)
}

/* Morgendämmerung mit leichten Wolken */
.period-morning{
  background:
    radial-gradient(circle at 18% 35%, rgba(255,255,255,.82) 0 5px, transparent 6px),
    radial-gradient(circle at 27% 34%, rgba(255,255,255,.72) 0 7px, transparent 8px),
    radial-gradient(circle at 78% 28%, rgba(255,255,255,.68) 0 6px, transparent 7px),
    linear-gradient(
      180deg,
      #ffd3a0 0%,
      #e7eff8 48%,
      #a8d4ee 100%
    )
}

/* Klarer Mittagshimmel */
.period-noon{
  background:
    radial-gradient(circle at 18% 38%, rgba(255,255,255,.82) 0 5px, transparent 6px),
    radial-gradient(circle at 27% 37%, rgba(255,255,255,.72) 0 7px, transparent 8px),
    radial-gradient(circle at 82% 43%, rgba(255,255,255,.75) 0 6px, transparent 7px),
    linear-gradient(
      180deg,
      #69bdff 0%,
      #bde7ff 72%,
      #e4f6ff 100%
    )
}

/* Sonnenuntergang */
.period-evening{
  background:
    radial-gradient(circle at 15% 27%, rgba(255,219,206,.50) 0 5px, transparent 6px),
    radial-gradient(circle at 80% 28%, rgba(255,220,215,.48) 0 7px, transparent 8px),
    linear-gradient(
      180deg,
      #685eae 0%,
      #c97991 36%,
      #f39a6b 66%,
      #ffd084 100%
    )
}

/* Nachthimmel mit Sternen */
.period-night{
  background:
    radial-gradient(circle at 18% 22%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 35% 38%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 66% 19%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 42%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 56% 51%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
    linear-gradient(
      180deg,
      #071b45 0%,
      #16396d 100%
    )
}

/* Landschaft etwas weicher */
.today-period-visual::before{
  bottom:-16px;
  height:31px;
  border-radius:55% 55% 0 0
}

.today-period-visual::after{
  bottom:-18px;
  height:34px;
  border-radius:60% 55% 0 0
}

/* Sonnenpositionen */
.symbol-morning{
  left:34px;
  bottom:7px
}

.symbol-noon{
  right:20px;
  top:12px
}

.symbol-evening{
  right:29px;
  bottom:2px
}

.symbol-night{
  right:18px;
  top:10px
}

/* Ausblenden kleiner und unaufdringlicher */
.today-group-hide{
  width:30px;
  height:30px;
  font-size:1.2rem;
  opacity:.62
}

@media(max-width:560px){
  .today-period-visual{
    flex-basis:78px;
    width:78px;
    height:54px;
  }

  .symbol-morning{
    left:31px
  }
}

/* MedManager – naechster Einnahmezeitraum */
.today-intake-group.is-next{
  box-shadow:
    inset 4px 0 0 var(--accent)
}

.today-intake-group.is-next
.today-intake-group-summary{
  background:#f7fbff
}

.today-group-next{
  display:block;
  margin-top:2px;
  color:var(--accent) !important;
  font-size:.78rem !important;
  font-weight:800
}