/* Zeilenliste: Symbol, Text mit Kleingedrucktem, Zahl, Pfeil. Für Profil-Blatt, Verzeichnis, Menüs. */
@layer bausteine {
  .zeilenliste { margin: 1.2rem 0; border: 1px solid var(--rand); border-radius: var(--rundung-gross); background: var(--flaeche); overflow: hidden; }
  .zeilenliste.profil-blatt { margin: 1.2rem auto; }
  .blatt-karte .zeilenliste { background: var(--ton-1); }
  .zeile { display: flex; align-items: center; gap: .9rem; padding: .8rem .9rem; color: inherit; text-decoration: none; border-bottom: 1px solid var(--ton-3); cursor: pointer; background: transparent; border-left: 0; border-right: 0; border-top: 0; border-radius: 0; width: 100%; font: inherit; text-align: left; white-space: normal; justify-content: flex-start; }
  .zeilenliste > :last-child > .zeile, .zeilenliste > .zeile:last-child { border-bottom: 0; }
  .zeile:hover { background: var(--ton-2); filter: none; }
  .zeile-symbol { width: 2.3rem; height: 2.3rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; background: var(--ton-3); flex-shrink: 0; }
  .zeile-text { flex: 1; display: flex; flex-direction: column; font-size: 1.02rem; font-weight: 600; min-width: 0; }
  .zeile-text small { font-weight: 400; opacity: .55; font-size: .82rem; }
  .zeile-zahl { opacity: .5; }
  .pfeil { opacity: .4; transition: transform var(--dauer); }
  .zeile-auf[open] > .zeile .pfeil { transform: rotate(90deg); }
  .zeile-inhalt { padding: .4rem .9rem 1rem 4.1rem; border-bottom: 1px solid var(--ton-3); }
  .zeile-inhalt select, .zeile-inhalt textarea.eingabe, .zeile-inhalt input[type=text] { width: 100%; }
  .zeile-knopf.gefaehrlich .zeile-text { color: var(--gefahr); }
  .zeile-knopf { --k-grund: transparent; --k-text: inherit; --k-rand: transparent; }
  .zeile-still { cursor: default; }
  .zeile-still:hover { background: transparent; }
  .zeile-still .zeile-symbol .sonne, .zeile-still .zeile-symbol .mond { display: none; }
  .zeile-still[data-wirkt=dunkel] .zeile-symbol .mond, .zeile-still[data-wirkt=hell] .zeile-symbol .sonne { display: inline; }
  .schema-wahl-knoepfe { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
  .schema-wahl-knoepfe .stufe-knopf.aktiv { opacity: 1; background: var(--akzent-mittel); border-color: var(--d-akzent); }
  /* Blatt-Kopf: Abbrechen, Titel, Speichern */
  .schreib-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: 0; border: 0; background: transparent; }
  .schreib-rechts { display: flex; gap: .5rem; align-items: center; }
  .blatt-titel { font-size: 1.05rem; }
  .profil-blatt { max-width: 34rem; margin: 0 auto; }
  .profil-form { flex-direction: column; gap: .8rem; }
  .profil-kreis { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin: .8rem 0 1.2rem; }
  .reiter { display: flex; gap: 1.2rem; border-bottom: 1px solid var(--rand); margin-bottom: .6rem; }
  .reiter a { color: inherit; text-decoration: none; opacity: .6; padding: .4rem 0; border-bottom: 2px solid transparent; }
  .reiter a.aktiv { opacity: 1; font-weight: 600; border-bottom-color: var(--d-akzent); }
  .zurueck-zeile { margin: 0 0 .6rem; }
  .zurueck-knopf { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; font-size: .95rem; }
}
@layer handy {
  @media (max-width: 48rem) {
    .zeile-inhalt { padding-left: .9rem; }
    .zeile-still { flex-wrap: wrap; }
    .schema-wahl-knoepfe { flex-basis: 100%; justify-content: flex-start; padding-left: 3.2rem; }
    header.schreib-kopf { flex-wrap: nowrap; padding: 0; }
    header.schreib-kopf .blatt-titel { flex: 1; text-align: center; }
  }
}