/* ============================================================= Knopfstile. Fünf Stück, jeder ein paar Zeilen — mehr braucht es nicht, weil Farbe und Radius aus der Farbwelt kommen. Gesetzt wird über data-knopf am der Demo. ============================================================= */ .knopf{ display:inline-flex; align-items:center; gap:.55em; font:inherit; font-weight:500; line-height:1; padding:.85em 1.35em; cursor:pointer; text-decoration:none; border:1px solid transparent; background:var(--akzent); color:var(--akzent-text); transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .knopf:hover{ background:var(--akzent-hell); } .knopf:focus-visible{ outline:2px solid var(--akzent); outline-offset:3px; } .knopf--still{ background:transparent; color:var(--tinte); border-color:var(--linie-stark); } .knopf--still:hover{ background:transparent; border-color:var(--akzent); color:var(--akzent); } .knopf__pfeil{ display:inline-block; transition:transform .2s ease; } /* --- kantig ------------------------------------------------- */ [data-knopf="kantig"] .knopf{ border-radius:0; } /* --- weich -------------------------------------------------- */ [data-knopf="weich"] .knopf{ border-radius:10px; } [data-knopf="weich"] .knopf:hover{ transform:translateY(-1px); } /* --- pille -------------------------------------------------- */ [data-knopf="pille"] .knopf{ border-radius:999px; padding:.9em 1.6em; } [data-knopf="pille"] .knopf:hover{ transform:translateY(-1px); box-shadow:var(--schatten); } /* --- umriss ------------------------------------------------- */ [data-knopf="umriss"] .knopf{ border-radius:4px; background:transparent; color:var(--akzent); border-color:var(--akzent); } [data-knopf="umriss"] .knopf:hover{ background:var(--akzent); color:var(--akzent-text); } [data-knopf="umriss"] .knopf--still{ color:var(--tinte-weich); border-color:var(--linie-stark); } [data-knopf="umriss"] .knopf--still:hover{ background:transparent; color:var(--akzent); border-color:var(--akzent); } /* --- pfeil -------------------------------------------------- */ [data-knopf="pfeil"] .knopf{ border-radius:8px; } [data-knopf="pfeil"] .knopf:hover .knopf__pfeil{ transform:translateX(4px); } [data-knopf="pfeil"] .knopf--still:hover .knopf__pfeil{ transform:translateX(4px); } /* Weniger Bewegung heißt: kein Verschieben, nur Farbe. */ @media (prefers-reduced-motion: reduce){ .knopf, .knopf__pfeil{ transition:background .18s ease, color .18s ease; } .knopf:hover{ transform:none; } .knopf:hover .knopf__pfeil{ transform:none; } }