/* termin.css — Terminbuchung über Calendly im Markendesign, Click-to-Load. Additiv eingebunden mit EINER Zeile im (wie mobile.css). Vor dem Klick auf „Termin wählen" lädt die Seite nichts von Calendly; der Platzhalter ist reines HTML/CSS. Verhalten: /termin.js. Datenschutz: /datenschutz/#calendly. */ .tb{position:relative;overflow:hidden;margin-top:1.8rem} .tb::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--pulse),var(--pulse-deep) 60%,transparent)} .tb [hidden]{display:none!important} .tb-start{display:grid;gap:.9rem} .tb-start h3{font-size:clamp(1.25rem,3vw,1.6rem);line-height:1.15;text-wrap:balance;max-width:30ch} .tb-hinweis{color:var(--fog);max-width:64ch;font-size:.95rem;line-height:1.55;text-wrap:pretty} .tb-hinweis a{color:var(--pulse);text-decoration:underline;text-underline-offset:2px} .tb .zeile{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:.3rem} .tb .micro{font-family:var(--font-mono);font-size:.78rem;color:var(--fog-2);letter-spacing:.02em} .tb-laden[disabled]{opacity:.7;cursor:progress} /* feste Höhe: das Calendly-Iframe ist 100 % des Elternelements — bei nur min-height fiele es auf 150 px zurück. Mit resize:true setzt widget.js die Höhe anschließend auf die Inhaltshöhe. */ .tb-widget{height:680px;border-radius:10px;overflow:hidden;background:var(--obsidian-2)} .tb-widget iframe{display:block} .tb-aktiv .tb-kopf{display:grid;gap:.5rem;margin-bottom:1rem} .tb-aktiv .tb-kopf .micro a{color:var(--pulse);text-decoration:underline} .tb-fehler{color:var(--heart);margin-top:1rem} .tb-fehler a{color:var(--pulse);text-decoration:underline} /* Sektion auf /kontakt/ (die Startseite bringt ihren eigenen Sektionsrahmen mit) */ .termin-sec{border-bottom:1px solid var(--line)} .termin-sec .kopf{display:grid;gap:.75rem} .termin-sec .kopf .lead{max-width:56ch} @media(max-width:768px){ .tb-hinweis{font-size:1rem} .tb .btn{width:100%} .tb .micro{font-size:1rem;color:var(--fog)} .tb-widget{height:760px} }