/* games-703 · Site-weite Bausteine: die zwei kleinen Formulare (Feedback, Newsletter) und der Fuss
   (Wortmarke, die zehn, Ko-fi-Zeile, Legal-Zeile). #726 aus _landing/v2-play/play.css herausgeloest, weil About
   und Blog denselben Fuss und dieselben Formulare tragen (Esteban #726: Landing-Fuss unveraendert, 1:1 kopiert).
   Landing, Legal, About, Blog laden diese Datei VOR ihrem eigenen Stylesheet. */

/* ---- Zwei kleine Formulare: Feedback und Newsletter ---------------------- */
.notes { padding: var(--s7) 0 var(--s8); }
.notes__grid { display: grid; grid-template-columns: 1fr; gap: var(--s7); }
.note { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.note .h3 { margin: 0; }
.note__what { max-width: 40ch; }
.note__field { display: block; width: 100%; }
.note__field--grow { flex: 1 1 200px; width: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.note__area, .note__in {
  display: block; width: 100%;
  appearance: none; border: 0; margin: 0;
  background: var(--paper-2); color: var(--ink);
  font: inherit; line-height: 1.45;
  transition: box-shadow var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.note__area { max-width: 52ch; min-height: 120px; padding: var(--s3) var(--s4); border-radius: var(--r-md); resize: none; }
.note__in { min-height: 52px; padding: var(--s3) var(--s5); border-radius: var(--r-full); }
.note__area::placeholder, .note__in::placeholder { color: var(--ink-3); }
.note__area:focus, .note__in:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.note__row { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.note__row--inline { width: 100%; max-width: 52ch; }
.note__btn { flex: 0 0 auto; }
.note__done { margin: 0; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.note__done:empty { display: none; }
.note[data-sent] :is(.note__field, .note__row, .note__what) { display: none; }
.note[data-sent] .note__done { display: block; }
.note__done[data-err] { color: var(--bad); }

/* ---- Fuss: Wortmarke, die zehn, Privacy und Imprint, Domain, Jahr ------- */
.foot { border-top: 1px solid var(--line); padding: var(--s6) 0 max(var(--s7), env(safe-area-inset-bottom)); font-size: var(--t-xs); color: var(--ink-3); }
.foot__top { margin-bottom: var(--s4); color: var(--ink); }
.foot__logo { height: 20px; width: auto; display: block; margin-left: calc(20px * -0.227); }
.foot__games { display: flex; flex-wrap: wrap; column-gap: var(--s4); row-gap: var(--s1); margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.foot__games a, .foot__row a { color: var(--ink-2); text-decoration: none; font-weight: 500; }
.foot__games a:hover, .foot__row a:hover, .foot__games a:focus-visible, .foot__row a:focus-visible { color: var(--ink); outline: none; }
.foot__row { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--s4); row-gap: var(--s1); }
.foot__domain { font-weight: 600; color: var(--ink); margin-left: auto; }
.foot__lang { appearance: none; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-weight: 500; color: var(--ink-2); }
.foot__lang:hover, .foot__lang:focus-visible { color: var(--ink); outline: none; }
.foot__row a[aria-current] { color: var(--ink); }
/* Ko-fi (Esteban #724): eine stille Zeile, kein Knopf, kein Symbol, kein Kasten.
   Im Fuss zwischen den zehn Spielen und der Legal-Zeile, im Panel unter Thema. */
.foot__support { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin: 0 0 var(--s4); }
.foot__support .kofi { margin: 0; }
.foot__badge { margin-left: auto; opacity: .55; line-height: 0; transition: opacity var(--d-fast) var(--ease); }
.foot__badge:hover, .foot__badge:focus-visible { opacity: 1; outline: none; }
.foot__badge img { height: 24px; width: auto; display: block; }
.kofi { margin: 0 0 var(--s4); max-width: 52ch; font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); text-wrap: pretty; }