/* Terminkarte (Spec 2026-09-28-terminbuchung-kontakt-design.md), genutzt von /kontakt und /online-marketing */
.termin{display:flex;flex-direction:column;gap:22px;padding:32px;background:var(--blue-chalk)}
.termin .contact-heading-title{margin:0}
.termin-person{display:flex;align-items:center;gap:14px}
.termin-foto{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.termin-name{margin:0;font-size:17px;font-weight:600;line-height:1.3}
.termin-rolle{margin:0;font-size:14px;line-height:1.4;color:var(--text-color-02)}
.termin-fakten{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.termin-fakten li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:100px;background:var(--white-color);font-size:14px;font-weight:500;line-height:1.4}
.termin-icon{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#f3e1fe;color:var(--primary-color);flex:none}
.termin-icon-teams{border-radius:6px;background:#5059c9;color:var(--white-color)}
.termin-kontakte{display:flex;flex-wrap:wrap;gap:12px}
.termin-kontakte .termin-knopf{background:var(--white-color)}
.termin [hidden]{display:none!important}
.termin-status{margin:0;padding:12px 16px;border-left:3px solid var(--primary-color);background:var(--white-color);font-size:14px;line-height:1.5em}
.termin-status:empty{display:none}
.termin-fallback{display:flex;flex-direction:column;gap:20px}
.termin-fallback-text{margin:0;font-size:16px;line-height:1.55em}
.termin-datenschutz a{color:inherit;text-decoration:underline}
.termin-schritt{display:flex;flex-direction:column;gap:20px}
.termin-schritt-titel{margin:0;font-size:16px;font-weight:600;line-height:1.5em;outline:none}
.termin-woche{display:flex;align-items:stretch;gap:8px}
.termin-tage{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.termin-tag,.termin-zeit,.termin-pfeil{font:inherit;color:var(--text-color-01);background:var(--white-color);border:1px solid #d9dcf0;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.termin-tag{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px}
.termin-tag-name{font-size:13px;font-weight:600;line-height:1.3em;text-transform:uppercase}
.termin-tag-datum{font-size:15px;font-weight:600;line-height:1.3em;white-space:nowrap}
.termin-kurz{display:none}
.termin-tag[aria-pressed="true"]{background:var(--primary-color);border-color:var(--primary-color);color:var(--white-color)}
.termin-pfeil{width:40px;flex:none;font-size:20px;line-height:1}
.termin-tag:disabled,.termin-pfeil:disabled{opacity:.4;cursor:default}
.termin-zeiten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.termin-zeit{padding:10px 0;border-radius:100px;font-size:15px;font-weight:600}
.termin-tag:focus-visible,.termin-zeit:focus-visible,.termin-pfeil:focus-visible,.termin-aendern:focus-visible,.termin-mehr summary:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}
.termin-hinweis{margin:0;color:var(--text-color-02);font-size:14px;line-height:1.5em}
.termin-zeiten .termin-hinweis{grid-column:1/-1}
.termin-auswahl{margin:0;font-size:16px;font-weight:600;line-height:1.5em}
.termin-aendern{padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--text-color-02);text-decoration:underline;cursor:pointer}
.termin-mehr summary{cursor:pointer;list-style:none;font-size:14px;font-weight:600;line-height:1.5em;color:var(--text-color-01)}
.termin-mehr summary::-webkit-details-marker{display:none}
.termin-mehr[open] summary{margin-bottom:20px}
.termin-datenschutz{margin:0}
.termin-honig{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.termin-knopf .primary-button-arrow-block-2,.termin-knopf .primary-button-arrow-block-right-2{transition:opacity .4s ease,width .4s ease,height .4s ease}
.termin-knopf .primary-button-arrow-block-right-2{opacity:0;width:0;height:0}
.termin-knopf .button-hover-bg-outline{width:0;height:100%;transition:width .4s ease}
@media (hover:hover){.termin-knopf:hover .primary-button-arrow-block-2{opacity:0;width:0;height:0}.termin-knopf:hover .primary-button-arrow-block-right-2{opacity:1;width:36px;height:36px}.termin-knopf:hover .button-hover-bg-outline{width:100%}.termin-tag:hover:not(:disabled),.termin-zeit:hover,.termin-pfeil:hover:not(:disabled){border-color:var(--primary-color)}}
@media screen and (max-width:767px){.termin{padding:24px}}
@media screen and (max-width:479px){.termin-woche,.termin-tage{gap:4px}.termin-pfeil{width:32px}.termin-tag-datum{font-size:13px}.termin-lang{display:none}.termin-kurz{display:inline}.termin-zeiten{grid-template-columns:repeat(3,minmax(0,1fr))}}