/* Unterseite Termine: gemeinsamer Farbraum und bestehende Typografie. */
.dates-home .dates-intro { max-width: 1280px; margin: auto; padding: 95px 8% 100px; }
.dates-home .dates-intro h2 { margin-bottom: 32px; }
.dates-home .dates-intro > p:not(.eyebrow) { font-size: 21px; max-width: 580px; }
.dates-home .dates-jump { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 42px; }
.dates-home .dates-jump a { padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.dates-home .dates-jump span { margin-left: 14px; }
.dates-home nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 7px; }
.verbindung .dates-home > .dates-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; gap: 8%; max-width: 1280px; margin: auto; padding: 55px 8% 100px; }
.verbindung .dates-home > .dates-section::before { content: none; }
.dates-home .dates-heading h3 { font-size: clamp(34px, 4vw, 55px); margin-bottom: 28px; }
.dates-home .dates-heading > p:not(.eyebrow) { max-width: 400px; }
.dates-home .dates-card { min-width: 0; padding: 36px; border: 1px solid #2586a426; border-radius: 26px; background: linear-gradient(110deg, #81d7e324, #dbe4da18); overflow-wrap: anywhere; }
.dates-home .dates-card h3 { font-size: 28px; line-height: 1.25; margin-bottom: 22px; }
.dates-home .dates-card .textlink, .dates-home .dates-heading .textlink { margin-top: 26px; }
.dates-home .dates-stack { display: grid; gap: 28px; }
.dates-home .dates-singing .dates-card { background: linear-gradient(110deg, #dbe4da36, #f39f4a0c); }
.dates-home .dates-back { max-width: 1280px; padding: 10px 8% 90px; margin: auto; }
@media (min-width: 761px) and (max-width: 1200px) {
 .dates-home > header { flex-wrap: wrap; }
}
@media (max-width: 760px) {
 .dates-home .dates-intro { padding: 60px 8% 65px; }
 .dates-home .dates-intro h2 { font-size: clamp(54px, 13vw, 76px); }
 .dates-home .dates-intro > p:not(.eyebrow) { font-size: 18px; }
 .verbindung .dates-home > .dates-section { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 30px 8% 70px; }
 .dates-home .dates-card { padding: 28px 24px; }
 .dates-home .dates-card h3 { font-size: 25px; }
 .dates-home .dates-back { padding-bottom: 60px; }
}

/* Termine: Titel sichtbar, Veranstaltungsangaben aufklappbar. */
.verbindung .dates-home details.dates-card { padding: 24px 36px; border: 1px solid #2586a426; }
.verbindung .dates-home details.dates-card > summary {
  justify-content: space-between;
  gap: 24px;
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
}
.dates-home .dates-card > summary::after { flex-shrink: 0; }
.dates-home .dates-details { padding-top: 22px; padding-bottom: 12px; }
.dates-home .dates-details > p:first-child { margin-top: 0; }
.dates-home .dates-details > p { font-size: 16px; }
@media (max-width: 760px) {
  .verbindung .dates-home details.dates-card { padding: 18px 24px; }
  .verbindung .dates-home details.dates-card > summary { font-size: 25px; }
  .dates-home .dates-details > p { font-size: 15px; }
}

/* Eingebetteter Abschnitt nach dem Blog. */
.verbindung main > #termine.dates-home::before { content: none; }
@media (min-width: 761px) and (max-width: 1200px) {
  .verbindung > header:has(nav a[href="#termine"]) { flex-wrap: wrap; }
}

/* Gestaltungsprobe: Farbkomposition des Einstiegs hinter drei Terminüberschriften. */
.verbindung .dates-home :is(#dates-title, #breath-dates-title, #singing-dates-title) {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
}
.verbindung .dates-home :is(#dates-title, #breath-dates-title, #singing-dates-title)::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(115%, 390px);
  aspect-ratio: 3 / 2;
  left: -6%;
  top: 50%;
  transform: translateX(-60px) translateY(-43%) rotate(-7deg) scaleX(-1);
  background: url("assets/farbkomposition.jpg") center / cover no-repeat;
  opacity: .62;
  border-radius: 44% 56% 48% 52% / 45% 43% 57% 55%;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 48%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 48%, transparent 100%);
}
.verbindung .dates-home #dates-title::before {
  width: min(145%, 350px);
  left: -10%;
  transform: translateX(-60px) translateY(-44%) rotate(-10deg) scaleX(-1);
}
.verbindung .dates-home #singing-dates-title::before {
  left: calc(4% - 94px);
  transform: translateY(calc(-38% - 16px)) rotate(8deg) scaleX(-1);
  background-position: 42% center;
}
@media (max-width: 760px) {
  .verbindung .dates-home :is(#dates-title, #breath-dates-title, #singing-dates-title)::before {
    width: min(110%, 300px);
    left: -4%;
  }
}

/* Termin- und Gesangsüberschrift: Farbflächen etwas weiter rechts. */
.verbindung .dates-home :is(#dates-title, #singing-dates-title)::before { translate: 24px 0; }

/* Konzertfoto: schmaler, weniger Boden; Originaldatei unverändert. */
.dates-home .dates-singing .singing-concert-portrait { display:block; width:100%; max-width:380px; aspect-ratio:1086 / 1300; height:auto; object-fit:cover; object-position:center top; margin:48px 0 24px; border-radius:12px; }

/* Gesangstermine: Karten beginnen etwa auf Höhe der dritten Titelzeile. */
@media (min-width: 761px) {
  .dates-home #gesangstermine > .dates-stack {
    margin-top: calc(46.4px + clamp(72.76px, 8.56vw, 117.7px));
  }
}

/* Mehr Abstand zwischen Konzert- und Unterrichtskarte. */
.dates-home #gesangstermine > .dates-stack { gap: 64px; }

/* Atemtermine: Workshopkarte auf Höhe der zweiten Titelzeile. */
@media (min-width: 761px) {
  .dates-home #atemtermine > .dates-card { margin-top: calc(46.4px + clamp(36.38px, 4.28vw, 58.85px)); }
}