/* Felder: Text, Passwort, Suche, Auswahl, Textbereich. Am Handy mindestens 16 px, sonst zoomt iOS. */
@layer bausteine {
  input:where([type=text], [type=email], [type=password], [type=search], [type=number], [type=url], [type=datetime-local]), textarea, select, trix-editor.antwort-editor {
    flex: 1; min-width: 0; padding: .55rem .8rem; border: 1px solid var(--rand-stark); border-radius: var(--rundung-klein);
    background: var(--feld); color: CanvasText; line-height: 1.35;
  }
  :is(input, textarea, select, trix-editor):focus { border-color: var(--d-akzent); outline: 2px solid var(--akzent-mittel); outline-offset: 0; }
  ::placeholder { opacity: .5; color: inherit; }
  input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
  input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  textarea { resize: none; }
  textarea.eingabe { line-height: 1.35; max-height: 160px; overflow-y: auto; }
  select { appearance: none; -webkit-appearance: none; padding-right: 1.8rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .6rem center; background-size: .9rem; }
  select.leise { border: 0; background-color: transparent; opacity: .75; cursor: pointer; padding: .3rem 1.6rem .3rem .3rem; }
  input[type=range] { accent-color: var(--d-akzent); }
  input[type=color] { width: 4rem; height: 2rem; border: 0; background: transparent; padding: 0; cursor: pointer; }
  input[type=checkbox], input[type=radio] { accent-color: var(--d-akzent); width: 1.05rem; height: 1.05rem; margin: 0; }
  label { display: inline-flex; align-items: center; gap: .35rem; }
  .fest { font-size: 1.1rem; padding: .5rem .7rem; border-radius: var(--rundung-klein); background: var(--ton-1); }
  .fest small { font-family: var(--schrift); opacity: .5; margin-left: .5rem; }
  .zaehler { font-size: var(--winzig); opacity: .5; }
  .suche, .suchzeile input[type=search] { width: 100%; }
  .verzeichnis .suche { margin-bottom: var(--abstand); }
  .suchzeile { margin-bottom: var(--abstand); }
  /* Feldgruppen: Beschriftung über dem Feld, Kleingedrucktes daneben */
  .feldgruppe { display: flex; flex-direction: column; gap: .8rem; }
  .feldgruppe label, .profil-form label, .behalten-form label { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; font-size: var(--klein); }
  .feldgruppe label small, .profil-form label small, .behalten-form label small { opacity: .55; }
  .feldgruppe .zaehler { align-self: flex-end; margin-top: -1.2rem; }
  .planen-feld { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; }
  .planen-feld small { opacity: .5; }
  .planen[hidden] { display: none; }
  /* Hinweis „Tippen kopiert": kleines grünes Schild über dem Element */
  .kopierbar { cursor: copy; position: relative; }
  .kopierbar[data-hinweis]::after { content: attr(data-hinweis); position: absolute; left: 50%; top: -1.6rem; transform: translateX(-50%); background: var(--gut); color: #052e16; font: 700 .7rem var(--schrift); padding: .1rem .5rem; border-radius: var(--rundung-klein); white-space: nowrap; pointer-events: none; z-index: var(--z-befehle); }
}
@layer handy {
  @media (pointer: coarse) {
    input:where([type=text], [type=email], [type=password], [type=search], [type=number], [type=url], [type=datetime-local]), textarea, select { font-size: max(16px, 1em); }
  }
}