/* Bauteile: Knöpfe, Meldungen, Marken, Karten und die Bühne für einzelne Karten (Anmeldung).
   Felder stehen in formular.css, Tabellen in tabelle.css, kurze Listen und Verlauf in listen.css. */

@layer bauteile {
  .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 1.15rem;
    font: 500 var(--gr-15) / 1 var(--schrift-titel);
    color: var(--text);
    background: var(--glas);
    border: 1px solid var(--rand);
    border-radius: var(--pille);
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-knopf);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz), background var(--dauer-kurz);

    &:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--kante), var(--schatten-1); }
    &:active { transform: scale(0.98); }
    & .icon { width: 1.05em; height: 1.05em; }

    &.haupt {
      color: var(--akzent-text);
      background: var(--verlauf-akzent);
      border-color: transparent;
      box-shadow: var(--leuchten);
      &:hover { filter: brightness(1.08); box-shadow: var(--leuchten), var(--schatten-1); }
    }

    &.leise {
      color: var(--text-2);
      background: none;
      border-color: transparent;
      box-shadow: none;
      &:hover { color: var(--text); background: var(--tinte-flaeche); transform: none; }
    }

    &.gefahr { color: var(--minus-text); background: var(--minus); border-color: transparent; &:hover { filter: brightness(1.08); } }
    &.klein { padding: 0.45rem 0.8rem; font-size: var(--gr-14); }
    &.rund { padding: 0.5rem; border-radius: 50%; & .icon { width: 1.15rem; height: 1.15rem; } }
  }

  .meldung {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    font-size: var(--gr-15);
    border-radius: var(--rund-s);
    background: var(--tinte-flaeche);

    & .icon { margin-top: 0.1rem; }
    &.fehler { color: var(--minus); background: var(--minus-flaeche); }
    &.erfolg { color: var(--plus); background: var(--plus-flaeche); }
    &.warnung { color: var(--warnung); background: var(--warnung-flaeche); }
  }

  /* Marke: kleine Pille für Art und Zustand, ohne Zusatz neutral */
  .marke {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    font: 600 var(--gr-12) / 1.4 var(--schrift-titel);
    white-space: nowrap;
    color: var(--text-2);
    background: var(--tinte-flaeche);
    border-radius: var(--pille);

    & .icon { width: 0.95em; height: 0.95em; }
    &.warnung { color: var(--warnung); background: var(--warnung-flaeche); }
    &.erfolg { color: var(--plus); background: var(--plus-flaeche); }
  }

  /* Kürzel: Anfangsbuchstaben (oder ein Icon) im Kreis in der Farbe der Agentur; zart in Listen, groß im Kopf */
  .kuerzel {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    font: 600 var(--gr-13) / 1 var(--schrift-titel);
    color: var(--akzent-text);
    background: var(--akzent);
    border-radius: 50%;

    & .icon { width: 50%; height: 50%; }
    &.zart { width: 2rem; height: 2rem; font-size: var(--gr-12); color: var(--akzent); background: var(--fokus-schein); }
    &.gross { width: 3.25rem; height: 3.25rem; font-size: var(--gr-18); box-shadow: var(--schatten-knopf); }
  }

  /* Wortmarke: der Name der Software (wortmarke()), hervorgehobene Buchstaben kräftig in der Farbe der Agentur; daneben
     klein die Versionsnummer, angemeldet als Link zu "Was ist neu?", mit einem Punkt bei Neuem (js/kern/neu.js) */
  .wortmarke-zeile { display: inline-flex; align-items: baseline; gap: 0.4em; font-size: var(--gr-15); }
  .wortmarke {
    font: 500 1em / 1 var(--schrift-titel);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-2);
    & b { font-weight: 800; color: var(--akzent); }
  }
  .version { position: relative; font: 500 var(--gr-11) / 1 var(--schrift-text); color: var(--text-leise); text-decoration: none; }
  a.version:hover { color: var(--text); text-decoration: underline; }
  .version.neu::after {
    content: "";
    position: absolute;
    top: -0.45em;
    right: -0.65em;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--akzent);
    border-radius: 50%;
  }
  /* Unter dem Logo der Agentur, auf der Anmeldung und in der Seitenleiste */
  .leiste-wortmarke { align-self: center; justify-self: center; margin-top: calc(-1 * var(--a2)); font-size: var(--gr-16); }
  .buehne-wortmarke { justify-self: center; margin-top: calc(-1 * var(--a3)); font-size: var(--gr-18); }

  /* Reihe: Knöpfe und Marken nebeneinander, bei Bedarf umbrechend */
  .reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--a2);

    &.auseinander { justify-content: space-between; }
  }

  /* Bühne: eine Karte mittig, darüber das Logo der Agentur (im Dunklen auf hellem Grund) */
  .buehne {
    display: grid;
    justify-items: center;
    gap: var(--a5);
    max-width: 28rem;
    margin: 0 auto;
    padding: max(6vh, var(--a6)) var(--a4) var(--a6);
  }

  .marke-logo {
    width: min(24rem, 100%);
    height: auto;
    padding: var(--a3) var(--a4);
    background: var(--logo-grund);
    border-radius: var(--rund);
  }

  .schritt {
    display: grid;
    gap: var(--a4);
    width: 100%;
    padding: var(--a6);
    border-radius: var(--rund-l);
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-2);

    & h1 { font-size: var(--gr-24); }
    & > p { color: var(--text-2); }
    & form { display: grid; gap: var(--a4); }
    & .knopf.haupt { width: 100%; padding-block: 0.85rem; font-size: var(--gr-16); }
  }

  .buehne-fuss {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--gr-14);
    color: var(--text-leise);
  }

  /* Karten und ihre Anordnung */
  .karte {
    display: grid;
    align-content: start;
    gap: var(--a4);
    padding: var(--a5);
    border-radius: var(--rund-l);

    & h2 { display: flex; align-items: center; gap: var(--a2); }
    & h2 .icon { color: var(--akzent); }
  }

  .spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: var(--a5);
    align-items: start;
  }

  /* Kopf einer Karte: Überschrift links, Zusatz oder Knöpfe rechts */
  .karte-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--a2);
    & .leise { font-size: var(--gr-13); }
  }

  /* Angaben als Paare: Begriff links, Wert rechts. Ist der Wert mehrzeilig, steht der Begriff auf Höhe der ersten Zeile
     (so hoch wie eine Zeile des Werts, darin mittig). */
  .angaben {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 0.45rem var(--a4);
    margin: 0;

    & dt {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      min-height: 1.55em;
      font-size: var(--gr-14);
      line-height: calc(var(--gr-16) * 1.55);
      color: var(--text-leise);
    }
    & dt .icon { width: 1rem; height: 1rem; }
    & dd { margin: 0; overflow-wrap: anywhere; }
  }

  /* Leer: wenn eine Liste nichts zeigt */
  .leer-zustand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--a2);
    padding: var(--a6) var(--a4);
    color: var(--text-leise);
  }

  @media (max-width: 30rem) {
    .schritt, .karte { padding: var(--a5) var(--a4); }
    .angaben { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
    .angaben dd + dt { margin-top: var(--a2); }
  }
}