/* DG Spreda-Deindrup – horizontale Terminwalzen, Testversion 3 */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: Georgia, "Times New Roman", serif; color: #333; background: #fff; }

.dg-termine { max-width: 1400px; margin: 0 auto; padding: 14px 18px; }
.dg-termine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 3vw, 36px); }
.dg-terminwalze { min-width: 0; padding: 16px 18px 18px; background: #fffbea;
    border-radius: 18px; box-shadow: 0 8px 30px rgba(0,0,0,.07); }
.dg-terminwalze h3 { margin: 0 0 13px; text-align: center; font-size: 1.35rem; font-weight: 600; }

/* Flaches Fenster, mit sanfter Ausblendung an beiden Seiten. */
.dg-walze-fenster { position: relative; height: 116px; overflow: hidden;
    container-type: inline-size;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.dg-walze-inhalt { display: flex; width: max-content; height: 100%;
    animation: dg-laufband 65s linear infinite; will-change: transform; }
.dg-walze-gruppe { display: flex; flex: 0 0 auto; align-items: stretch; gap: 18px; padding-right: 18px; }
.dg-termin { flex: 0 0 72cqw; width: 72cqw; min-width: 0; height: 116px;
    padding: 10px 14px; overflow: hidden; background: #f8f8f5;
    border-left: 4px solid #d7b85b; border-radius: 10px;
    transition: background .25s ease, box-shadow .25s ease; }
.dg-termin:hover { background: #fff9e8; box-shadow: 0 4px 15px rgba(0,0,0,.06); }
.dg-termin-datum { display: block; margin-bottom: 3px; font-size: .83rem; font-weight: 600; color: #96782b; }
.dg-termin-titel { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; color: #333; }
.dg-termin-info { display: block; margin-top: 3px; font-size: .84rem; line-height: 1.3; color: #666; }
.dg-termin a, a.dg-termin { color: inherit; text-decoration: none !important; }
a.dg-termin:hover { color: inherit; text-decoration: none !important; }
.dg-termin * { text-decoration: none !important; }

/* Links: links nach rechts; rechts: rechts nach links. */
.dg-terminwalze:first-child .dg-walze-inhalt { animation-direction: reverse; }
@keyframes dg-laufband { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dg-walze-fenster:hover .dg-walze-inhalt,
.dg-walze-fenster:focus-within .dg-walze-inhalt { animation-play-state: paused; }
.dg-walze-statisch { animation: none !important; }
.dg-walze-einzel .dg-walze-gruppe { padding-right: 0; }

@media (max-width: 767px) {
    .dg-termine { padding: 10px 12px; }
    /* Zwei kompakte Reihen passen in den vorhandenen 260px-iFrame. */
    .dg-termine-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .dg-termine { padding: 6px 10px; }
    .dg-terminwalze { padding: 7px 10px 8px; border-radius: 12px; }
    .dg-terminwalze h3 { margin: 0 0 5px; font-size: 1.05rem; }
    .dg-walze-fenster { height: 78px; }
    .dg-termin { height: 78px; width: 65cqw; flex-basis: 65cqw; padding: 5px 9px; border-left-width: 3px; }
    .dg-termin-titel { font-size: .88rem; }
    .dg-termin-info { font-size: .75rem; }
    .dg-termin-datum { font-size: .75rem; }
    .dg-walze-inhalt { animation-duration: 70s; }
}
@media (prefers-reduced-motion: reduce) {
    .dg-walze-inhalt { animation: none !important; }
    .dg-termin { transition: none; }
}
