
    :host { display: block; }
    .titel {
      font-family: var(--schrift-anzeige);
      font-size: 1.35rem;
      color: var(--farbe-primaer);
      margin-bottom: .35rem;
    }
    .untertitel {
      color: var(--farbe-text-ged);
      font-size: .88rem;
      margin-bottom: 1.5rem;
    }
    .kal-kopf {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 1rem;
    }
    .kal-kopf button {
      background: none;
      border: 1.5px solid var(--farbe-rahmen);
      border-radius: var(--radius);
      width: 36px; height: 36px;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: var(--uebergang);
      color: var(--farbe-text);
    }
    .kal-kopf button:hover { border-color: var(--farbe-primaer); }
    .kal-monat {
      font-weight: 600;
      font-size: 1.05rem;
    }
    .kal-gitter {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
      text-align: center;
    }
    .kal-tag-name {
      font-size: .7rem;
      text-transform: uppercase;
      letter-spacing: .06em;
      color: var(--farbe-text-ged);
      font-weight: 600;
      padding: .4rem 0;
    }
    .kal-tag {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: .88rem;
      cursor: pointer;
      border: none;
      background: transparent;
      font-family: var(--schrift-text);
      transition: var(--uebergang);
      color: var(--farbe-text);
      position: relative;
    }
    .kal-tag:hover:not(.deaktiviert):not(.leer) {
      background: var(--farbe-akzent-h);
    }
    .kal-tag.leer { visibility: hidden; }
    .kal-tag.deaktiviert {
      color: var(--farbe-deaktiv);
      cursor: not-allowed;
      text-decoration: line-through;
    }
    .kal-tag.feiertag {
      color: var(--farbe-primaer);
      font-weight: 600;
    }
    .kal-tag.feiertag::after {
      content: '';
      position: absolute;
      bottom: 3px;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--farbe-akzent);
    }
    .kal-tag.gewaehlt {
      background: var(--farbe-primaer);
      color: #fff;
      font-weight: 600;
    }
    .kal-tag.ausgeschlossen {
      background: repeating-linear-gradient(
        45deg, transparent, transparent 2px,
        rgba(164,36,59,.1) 2px, rgba(164,36,59,.1) 4px
      );
      color: var(--farbe-deaktiv);
      cursor: not-allowed;
    }
    .kal-tag.heute {
      border: 2px solid var(--farbe-akzent);
    }
    .legende {
      display: flex;
      gap: 1.25rem;
      margin-top: 1rem;
      font-size: .75rem;
      color: var(--farbe-text-ged);
    }
    .legende-eintrag { display: flex; align-items: center; gap: .35rem; }
    .legende-punkt {
      width: 10px; height: 10px; border-radius: 50%;
    }
    .legende-punkt.feiertag-punkt { background: var(--farbe-akzent); }
    .legende-punkt.gewaehlt-punkt { background: var(--farbe-primaer); }
    .legende-punkt.deaktiv-punkt { background: var(--farbe-deaktiv); }
    .auswahl-anzeige {
      margin-top: 1.25rem;
      padding: .8rem 1rem;
      background: rgba(0,36,64,.05);
      border-radius: var(--radius);
      font-size: .9rem;
      color: var(--farbe-primaer);
      font-weight: 500;
    }
    .fehler-text {
      color: var(--farbe-gefahr);
      font-size: .82rem;
      margin-top: .6rem;
      display: none;
    }
    .fehler-text.sichtbar { display: block; }
  
