/* ============================================================ UTILITIES — Buttons, visually-hidden, kleine Helfer ============================================================ */ .btn { display: inline-block; padding: var(--btn-pad-y) var(--btn-pad-x); white-space: nowrap; background: var(--clr-accent); color: var(--clr-text); font-size: var(--btn-font); line-height: var(--btn-line); text-decoration: none; text-align: center; border: 1px solid var(--clr-accent); border-radius: var(--radius-btn); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } /* primary (Default) */ .btn:hover { background: var(--clr-accent-dark); border-color: var(--clr-accent-dark); color: var(--clr-text); } .btn:focus-visible { outline: 2px solid var(--clr-text); outline-offset: 2px; } .btn:active { transform: translateY(1px); } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; transform: none; } /* secondary */ .btn--outline { background: transparent; border-color: var(--clr-text); } .btn--outline:hover { background: var(--clr-glass-bg); border-color: var(--clr-text); color: var(--clr-text); } /* Größenmodifier — Padding ist em-basiert, skaliert mit der font-size */ .btn--sm { font-size: var(--btn-font-sm); } .btn--lg { font-size: var(--btn-font-lg); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Inline-Icons (Bootstrap Icons via icon()-Helper). Größe = font-size, Farbe = currentColor. */ .icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; } .text-center { text-align: center; } .text-muted { color: var(--clr-text-muted); }