/* Rahmen von anker42 um die Beispielseiten, in den Farben und Schriften von anker42. Bewusst ohne Tailwind, damit er auf jeder Beispielseite gleich aussieht. */ @font-face { font-family: "Sora"; src: url("/fonts/sora-variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } @font-face { font-family: "Inter"; src: url("/fonts/inter-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } .a42-abschluss { background: #101d29; color: #eceef0; font-family: "Inter", system-ui, sans-serif; font-size: 1.125rem; line-height: 1.6; text-align: center; padding: 6rem 1rem; } .a42-abschluss img { display: block; margin: 0 auto; } .a42-abschluss h2 { font-family: "Sora", "Inter", sans-serif; font-weight: 600; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; margin: 2rem 0 0; text-transform: none; } .a42-abschluss p { max-width: 50ch; margin: 1.5rem auto 0; color: rgb(236 238 240 / 0.75); } .a42-abschluss div { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 3rem; } .a42-knopf { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #0088cc; border-radius: 999px; background: #0088cc; color: #101d29; font-weight: 600; padding: 1rem 2rem; text-decoration: none; transition: filter 200ms ease-out, background-color 200ms ease-out, color 200ms ease-out, transform 200ms ease-out; } .a42-knopf:hover { filter: brightness(1.1); } .a42-knopf:active { transform: scale(0.98); } .a42-knopf-rand { background: transparent; color: #eceef0; } .a42-knopf-rand:hover { background: #0088cc; color: #101d29; filter: none; } /* Schwebender Knopf unten am Rand */ .a42-zurueck { position: fixed; inset-inline-start: 1rem; bottom: 1rem; z-index: 50; display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1.25rem 0.5rem 0.5rem; border-radius: 999px; background: rgb(16 29 41 / 0.92); backdrop-filter: blur(8px); color: #eceef0; font-family: "Inter", system-ui, sans-serif; font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 8px 24px rgb(0 0 0 / 0.25); transition: background-color 200ms ease-out, transform 200ms ease-out; animation: a42-herein 500ms cubic-bezier(0.22, 1, 0.36, 1) 800ms both; } .a42-zurueck:hover { background: #101d29; transform: translateY(-2px); } .a42-zurueck:focus-visible, .a42-knopf:focus-visible { outline: 3px solid #0088cc; outline-offset: 3px; } @keyframes a42-herein { from { opacity: 0; transform: translateY(12px); } } @media (prefers-reduced-motion: reduce) { .a42-zurueck { animation: none; } } /* Platz im Footer, damit der schwebende Knopf nichts verdeckt */ body > footer { padding-bottom: 6rem !important; } /* Sicherheitsnetz: nichts darf die Seite seitlich verschiebbar machen (iPhone) */ html, body { overflow-x: clip; } /* Bis die Texte aus inhalte.js eingesetzt sind, bleibt die Seite unsichtbar (Klasse setzt ein Skript im ) */ .vorlauf body { visibility: hidden; }