/* Gemeinsame Grundlage der drei Beispiel-Designs (focustrend.de/werkstatt). Aussehen steht in jeder Beispiel-Datei selbst. */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(assets/schrift/plus-jakarta-sans-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:italic;font-weight:200 800;font-display:swap;src:url(assets/schrift/plus-jakarta-sans-italic-latin.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:100 1000;font-display:swap;src:url(assets/schrift/dm-sans-normal-latin.woff2) format("woff2")}

:root{--band-h:48px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--band-h) + 86px);-webkit-text-size-adjust:100%}
body{margin:0;padding-top:var(--band-h);overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* Eingebettet in die Bühne der Hauptseite: ohne Leiste, ohne Rollbalken */
html.einbett{--band-h:0px;scroll-behavior:auto;scrollbar-width:none}
html.einbett::-webkit-scrollbar,html.einbett body::-webkit-scrollbar{display:none}
html.einbett .band{display:none}

/* Leiste „Beispiel-Design von Focustrend“ */
.band{position:fixed;inset:0 0 auto 0;z-index:300;height:var(--band-h);display:flex;align-items:center;gap:10px;padding:0 12px;background:#1c1c25;border-bottom:1px solid #3b3b4c;color:#fff;font:500 14px/1.2 "DM Sans",system-ui,sans-serif}
.band a{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:10px;text-decoration:none;font-weight:700;white-space:nowrap;flex:none}
.band-zurueck{box-shadow:inset 0 0 0 1.5px #5a5a70}
.band-zurueck svg{width:16px;height:16px}
.band-text{flex:1;min-width:0;text-align:center;color:#c9cdda;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band-text b{color:#fff}
.band-anfragen{background:linear-gradient(100deg,#6a57f2,#2f9cf0)}
@media (max-width:640px){.band-text span{display:none}.band{font-size:13px}.band a{padding:0 11px}}

/* Räder */
.dreh{transform-box:fill-box;transform-origin:center;animation:dreh 1.4s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}

/* Einblenden beim Scrollen */
.js .auf{opacity:0;translate:0 34px;transition:opacity .75s cubic-bezier(.2,.7,.2,1),translate .75s cubic-bezier(.2,.7,.2,1),scale .75s cubic-bezier(.2,.7,.2,1)}
.js .auf.von-links{translate:-46px 0}
.js .auf.von-rechts{translate:46px 0}
.js .auf.gross{translate:0 0;scale:.9}
.js .auf.da{opacity:1;translate:none;scale:none}
/* Am Handy nur von unten einblenden – seitliches Einfahren würde die Seite kurz breiter machen */
@media (max-width:900px){.js .auf.von-links:not(.da),.js .auf.von-rechts:not(.da){translate:0 34px}}

/* Termin-Formulare: Mechanik */
form[data-termin]{position:relative}
.stufen{display:grid}
[data-schritt]{grid-area:1/1;visibility:hidden;opacity:0;transform:translateX(34px);transition:opacity .35s,transform .35s,visibility 0s .35s}
[data-schritt].an{visibility:visible;opacity:1;transform:none;transition:opacity .4s .05s,transform .4s .05s}
.wahl{cursor:pointer}
.fertig{position:absolute;inset:0;z-index:4;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:26px}
form.erledigt .fertig{display:flex;animation:fertig .4s ease-out}
@keyframes fertig{from{opacity:0;transform:scale(.96)}}
.fertig-haken{stroke-dasharray:30;stroke-dashoffset:30}
form.erledigt .fertig-haken{animation:haken .5s ease-out .35s forwards}
@keyframes haken{to{stroke-dashoffset:0}}
.nur-beispiel{font-size:.82rem;opacity:.65}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .auf{opacity:1;translate:none;scale:none}
  .fertig-haken{stroke-dashoffset:0}
}