/* Knöpfe. Ein Baustein, Varianten über Variablen (--k-grund, --k-text, --k-rand), wie Fizzys .btn.
   Voll = Akzent. leise = Rahmen. rund = Pille. gefaehrlich = rot. Alte Klassennamen bleiben gültig. */
@layer bausteine {
  button, input[type=submit], .knopf {
    --k-grund: var(--d-akzent); --k-text: var(--akzent-text); --k-rand: transparent;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: var(--rundung-klein); border: 1px solid var(--k-rand);
    background: var(--k-grund); color: var(--k-text); font-weight: 500; line-height: 1.25;
    text-decoration: none; cursor: pointer; white-space: nowrap;
  }
  :is(button, input[type=submit], .knopf):hover { filter: brightness(1.08); }
  :is(button, input[type=submit], .knopf):active { transform: translateY(1px); }
  :is(button, input[type=submit], .knopf):disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
  .leise, .knopf-leise { --k-grund: transparent; --k-text: inherit; --k-rand: var(--ton-5); opacity: .8; }
  .leise:hover, .knopf-leise:hover { opacity: 1; background: var(--ton-1); filter: none; }
  .knopf-leise { border-radius: var(--rundung-pille); padding: .4rem .9rem; font-size: .95rem; }
  .rund { border-radius: var(--rundung-pille); }
  .gross { font-size: 1.2rem; padding: .8rem 1.4rem; width: 100%; }
  .gefaehrlich { --k-grund: var(--gefahr); --k-text: white; }
  .leise.gefaehrlich, .klein-knopf.gefaehrlich { --k-grund: transparent; --k-text: var(--gefahr); --k-rand: color-mix(in srgb, var(--gefahr) 45%, transparent); font-weight: 600; }
  .klein-knopf { font-size: var(--klein); padding: .25rem .6rem; }
  .knopf-breit { flex: 1; padding: .65rem 1rem; font-size: var(--normal); font-weight: 600; border-radius: var(--rundung-pille); }
  .notieren { border-radius: var(--rundung-pille); padding: .45rem 1.1rem; font-weight: 600; }
  .plus-knopf { gap: .4rem; }
  /* Nur ein Symbol, kein Rahmen */
  .symbol-knopf, .symbol-knopf-kopf { --k-grund: transparent; --k-text: inherit; --k-rand: transparent; padding: .3rem .4rem; opacity: .7; }
  .symbol-knopf:hover, .symbol-knopf-kopf:hover { opacity: 1; background: var(--ton-2); filter: none; }
  .symbol-knopf { margin-left: auto; opacity: .4; }
  .ton-knopf .glocke-aus { display: none; }
  .ton-knopf.aus .glocke-an { display: none; }
  .ton-knopf.aus .glocke-aus { display: inline; opacity: .5; }
  .fenster-knopf { padding: .3rem .4rem; }
  /* Text, der wie ein Link wirkt */
  .text-knopf, button.leise.text-knopf, .aktion, button.aktion.leise { --k-grund: transparent; --k-text: inherit; --k-rand: transparent; padding: 0; border: 0; font: inherit; font-size: var(--klein); opacity: 1; border-radius: 0; }
  .text-knopf:hover { text-decoration: underline; background: transparent; filter: none; }
  .aktion { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; }
  .aktion:hover { color: var(--d-akzent); background: transparent; filter: none; }
  /* Türen (zwei große Wahlknöpfe) */
  .start-tueren { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
  .tuer-knopf { display: flex; flex-direction: column; gap: .2rem; align-items: center; padding: 1rem .8rem; border-radius: var(--rundung-gross); white-space: normal; }
  .tuer-knopf strong { font-size: 1.15rem; }
  .tuer-knopf span { font-size: .8rem; opacity: .85; }
  .klopf-knopf { --k-grund: transparent; --k-text: inherit; --k-rand: var(--ton-5); font-size: 1.1rem; padding: .3rem .5rem; }
  .schema-knopf .sonne, .schema-knopf .mond { display: none; }
  .schema-knopf[data-wirkt=dunkel] .sonne { display: inline; }
  .schema-knopf[data-wirkt=hell] .mond { display: inline; }
}
@layer handy {
  @media (max-width: 40rem) { .start-tueren { grid-template-columns: 1fr; } }
}