/*
  Systemweite Button-Komponente. Traegt sowohl <a href> (typ=link) als auch
  <button type="button"/"submit"> (typ=button/submit) ueber dieselbe .btn-Klasse --
  visuell identisch, siehe button.mustache. 4 Farbvarianten x 3 Groessen als echte
  Parameter, keine Kopien (behebt die 8-Hero/7-Card-Kopier-Krankheit aus dem
  Legacy-Befund fuer diesen Baustein).
*/@layer komponenten{.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:inherit;font-weight:var(--weight-semibold);line-height:1;text-decoration:none;text-align:center;border:1px solid transparent;border-radius:var(--radius-lg);cursor:pointer;-webkit-appearance:none;appearance:none;background:none;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast),border-color var(--transition-fast),opacity var(--transition-fast)}/* ---- Groessen ---- */.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);border-radius:var(--radius-md);gap:var(--space-1)}.btn--default{padding:var(--space-3) var(--space-6);font-size:var(--text-base)}.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--text-lg);border-radius:var(--radius-xl);gap:var(--space-3)}/* ---- Varianten ---- */.btn--primary{position:relative;isolation:isolate;overflow:hidden;background:var(--farbe-akzent);color:var(--farbe-auf-akzent);box-shadow:var(--shadow-md)}.btn--primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn--primary:active{transform:translateY(0)}/* Cursor-getriebener Hover-Glow: --x/--y kommen aus button.js (Mausposition
     als Prozent). Ohne JS bleiben --x/--y unbelegt -> radial-gradient faellt auf
     die Vorgabewerte 50% 50% zurueck, ein normaler zentrierter Glanz -- der
     Effekt ist also reines Progressive Enhancement, kein Funktionsverlust ohne
     JS (siehe button.js Kommentar). */.btn--primary::after{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(
      circle 120px at var(--x, 50%) var(--y, 50%),
      color-mix(in oklch, var(--farbe-auf-akzent) 35%, transparent),
      transparent 70%
    );opacity:0;transition:opacity var(--transition-base)}.btn--primary:hover::after{opacity:1}.btn--secondary{background:transparent;color:var(--farbe-text);border-color:color-mix(in oklch, var(--farbe-text) 35%, transparent)}.btn--secondary:hover{border-color:var(--farbe-text);background:color-mix(in oklch, var(--farbe-text) 6%, transparent)}.btn--ghost{background:transparent;color:var(--farbe-akzent);padding-inline:var(--space-3)}.btn--ghost:hover{background:color-mix(in oklch, var(--farbe-akzent) 10%, transparent)}.btn--danger{background:var(--farbe-gefahr);color:var(--farbe-auf-gefahr);box-shadow:var(--shadow-md)}.btn--danger:hover{background:var(--farbe-gefahr-hover);transform:translateY(-1px);box-shadow:var(--shadow-lg)}.btn--danger:active{transform:translateY(0)}.btn:focus-visible{outline:2px solid var(--farbe-fokus);outline-offset:2px}/* ---- Icons ---- */.btn__icon{display:inline-flex;width:1.1em;height:1.1em;flex-shrink:0}.btn__icon svg{width:100%;height:100%}/* ---- Ladend: Spinner blendet per @starting-style ein/aus statt hart zu
     erscheinen (Guido-Vorgabe: Mikrointeraktion, kein Hart-Umschalten). display
     none->inline-block ist normalerweise nicht animierbar -- transition-behavior:
     allow-discrete macht genau das moeglich. ---- */.btn__spinner{display:none;width:1em;height:1em;border-radius:var(--radius-full);border:2px solid color-mix(in oklch, currentColor 25%, transparent);border-top-color:currentColor;opacity:0;transition:opacity var(--transition-fast),display var(--transition-fast) allow-discrete}.btn[data-ladend="true"] .btn__spinner{display:inline-block;opacity:1;animation:btn-spinner-drehen 0.6s linear infinite}@starting-style{.btn[data-ladend="true"] .btn__spinner { opacity:0}}@keyframes btn-spinner-drehen{to{transform:rotate(360deg)}}/* Label bleibt lesbar, tritt beim Laden nur etwas zurueck -- kein hartes
     Verschwinden, das Label bleibt fuer Screenreader/Layout-Stabilitaet stehen. */.btn[data-ladend="true"] .btn__label{opacity:0.75}/* ---- Deaktiviert/Ladend: echte, nicht nur optische Sperre. pointer-events:none
     unterbindet Klicks/Tastatur-Aktivierung tatsaechlich (nicht nur Optik) -- fuer
     <a href> gibt es kein natives disabled, das hier ist der echte Mechanismus.
     Natives disabled auf <button> blockt zusaetzlich bereits selbst. ---- */.btn:disabled,.btn[data-deaktiviert="true"],.btn[data-ladend="true"]{opacity:0.55;cursor:not-allowed;pointer-events:none;box-shadow:none;transform:none}