/* ══════════════════════════════════════════════════════════════════════
   EduAssets — Knopf-Familie, 11.08.2026

   ANLASS: Marcel hat den Optionsdialog aus Township als Beispiel geschickt
   und die Umsetzung freigegeben ("die knoepfe sehen gut aus bitte mal die
   masken nach und nach damit ausstatten").

   Was daran wirkt, ist nicht die Farbe -- es ist die PHYSIK. Unter jedem
   Knopf liegt ein dunklerer Sockel; dadurch sieht er drueckbar aus und
   wandert beim Tippen sichtbar darauf hinab. Ohne diesen Sockel ist ein
   Knopf eine eingefaerbte Flaeche, und der Nutzer weiss nicht, ob er
   getroffen hat. Auf dem iPad -- seit dem 08.08. der Hauptzugang -- ist das
   der Unterschied zwischen bedienbar und nicht.

   UEBERNOMMEN sind die Prinzipien, NICHT das Aussehen. Township-Farben,
   -Formen und -Symbole sind fremdes Design und stehen hier nirgends.

   WARUM DAS PRAEFIX ea-:
   Gemessen am Bestand waren `.k` (11 Fundstellen) und `.ic` (23 Fundstellen,
   4 eigene CSS-Regeln) bereits belegt. Ohne Praefix haette diese Datei
   stillschweigend fremde Elemente umgefaerbt -- ein Fehler, den niemand
   einer Stilvorlage zuordnet. `ea-` ist die Hauskonvention (vgl. ea-fsocial).

   BESTAND, den das hier ersetzen soll -- heute hat jede Seite ihr eigenes
   System: tu-btn-primary (13), btn-plan (20), icon-btn (6), lang-btn (20),
   mm-btn (5), filter-btn (4), add-btn (4). Umgestellt wird Maske fuer
   Maske, nicht auf einen Schlag: ein globaler Austausch trifft Seiten, die
   niemand nachprueft.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Farbe bedeutet etwas. Jede Familie hat Flaeche und Sockel.
     Der Sockel ist immer die deutlich dunklere Fassung -- nicht nur
     abgedunkelt, sondern so dunkel, dass die Kante auch auf einem
     schlecht eingestellten Beamer sichtbar bleibt. */
  --eak-ak:#d4924a;  --eak-ak-s:#8f5d24;   /* Hauptaktion, Hausfarbe   */
  --eak-ok:#3fa96b;  --eak-ok-s:#256b42;   /* bestaetigen, freigeben   */
  --eak-hi:#4a90d4;  --eak-hi-s:#2a5a8a;   /* Daten: speichern, laden  */
  --eak-ne:#3d4658;  --eak-ne-s:#262c38;   /* neutral, zurueck         */
  --eak-no:#d2553f;  --eak-no-s:#8a3125;   /* NUR fuer Unwiderrufliches*/
}

/* ── Der Knopf ────────────────────────────────────────────────────────
   Der Sockel ist ein Schatten, kein zweites Element. Damit bleibt es EIN
   Knopf fuer Tastatur und Vorleseprogramm -- und box-shadow statt border,
   weil ein Rahmen die Groesse aendert und der Text beim Druecken springt. */
/* 11.08.2026: eine Nummer kleiner auf Marcels Wunsch. 52 px statt 60 --
   immer noch deutlich ueber den 44 px, die Apple als Mindestmass fuer
   Finger nennt, und ueber den 34 px des bisherigen Bestands. */
.ea-k{
  --f:var(--eak-ak); --s:var(--eak-ak-s);
  appearance:none; -webkit-appearance:none; border:0; cursor:pointer;
  font-family:inherit; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:52px; padding:0 22px; border-radius:12px;
  background:var(--f);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--f) 88%, #fff) 0%, var(--f) 55%);
  color:#fff; font-size:15.5px; font-weight:700; letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
  box-shadow:0 5px 0 var(--s), 0 7px 12px rgba(0,0,0,.35);
  transition:transform .06s, box-shadow .06s, filter .12s;
  /* Ohne touch-action wartet Safari 300 ms auf einen moeglichen
     Doppeltipp -- der Knopf fuehlt sich dann traege an. */
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.ea-k:hover{filter:brightness(1.07)}
.ea-k:active{
  transform:translateY(4px);
  box-shadow:0 0 0 var(--s), 0 2px 5px rgba(0,0,0,.3);
}
.ea-k:focus-visible{outline:3px solid #7ab6ff; outline-offset:3px}
.ea-k[disabled], .ea-k.ea-aus{
  filter:grayscale(.7) brightness(.7); cursor:not-allowed;
  transform:none; box-shadow:0 5px 0 var(--s); pointer-events:none;
}

.ea-k.ea-ok{--f:var(--eak-ok); --s:var(--eak-ok-s)}
.ea-k.ea-hi{--f:var(--eak-hi); --s:var(--eak-hi-s)}
.ea-k.ea-ne{--f:var(--eak-ne); --s:var(--eak-ne-s)}
.ea-k.ea-no{--f:var(--eak-no); --s:var(--eak-no-s)}
.ea-k.ea-breit{width:100%}
.ea-k.ea-klein{
  min-height:42px; padding:0 16px; font-size:14px; border-radius:10px;
  box-shadow:0 3px 0 var(--s), 0 4px 8px rgba(0,0,0,.28);
}
.ea-k.ea-klein:active{transform:translateY(3px); box-shadow:0 0 0 var(--s)}

/* Symbolkachel -- eigenes Feld, damit das Zeichen nicht auf der Flaeche
   schwimmt und bei langen Beschriftungen den Abstand haelt. */
.ea-k .ea-k-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px; flex:0 0 auto;
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.ea-k.ea-klein .ea-k-ic{width:26px; height:26px; border-radius:7px}
.ea-k .ea-k-ic svg{
  width:16px; height:16px; stroke:#fff; fill:none;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.ea-k.ea-klein .ea-k-ic svg{width:15px; height:15px}

/* ── Runder Nebenknopf ─────────────────────────────────────────────── */
.ea-kr{
  --f:var(--eak-hi); --s:var(--eak-hi-s);
  appearance:none; -webkit-appearance:none; border:0; cursor:pointer;
  width:48px; height:48px; border-radius:14px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--f) 88%, #fff), var(--f));
  box-shadow:0 5px 0 var(--s), 0 7px 12px rgba(0,0,0,.35);
  transition:transform .06s, box-shadow .06s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.ea-kr:active{transform:translateY(5px); box-shadow:0 0 0 var(--s)}
.ea-kr:focus-visible{outline:3px solid #7ab6ff; outline-offset:3px}
.ea-kr svg{
  width:21px; height:21px; stroke:#fff; fill:none;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.ea-kr.ea-ok{--f:var(--eak-ok); --s:var(--eak-ok-s)}
.ea-kr.ea-ak{--f:var(--eak-ak); --s:var(--eak-ak-s)}
.ea-kr.ea-ne{--f:var(--eak-ne); --s:var(--eak-ne-s)}
.ea-kr.ea-no{--f:var(--eak-no); --s:var(--eak-no-s)}

/* ── Schalter ─────────────────────────────────────────────────────────
   Der Zustand steht als WORT daneben. Ein Schieber allein zwingt den
   Nutzer, sich die Konvention zu merken -- links aus, rechts an? Das ist
   nicht ueberall gleich. Und wer Farben schlecht unterscheidet, sieht nur
   einen grauen Kreis. */
.ea-sw{
  display:inline-flex; align-items:center; cursor:pointer;
  background:#1f2431; border:1px solid #2a3040; border-radius:999px;
  padding:4px; min-height:46px; touch-action:manipulation; user-select:none;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
  transition:background .16s, border-color .16s;
}
.ea-sw .ea-sw-kn{
  width:36px; height:36px; border-radius:999px; flex:0 0 auto;
  background:linear-gradient(180deg,#8a95ab,#5c6478);
  box-shadow:0 2px 0 #3a4152, 0 3px 6px rgba(0,0,0,.4);
  transition:background .16s;
}
.ea-sw .ea-sw-wo{
  padding:0 16px 0 12px; font-weight:700; font-size:15px; color:#9aa3b8;
  min-width:62px; text-align:center; transition:color .16s;
}
.ea-sw.ea-an{background:#1d2a20; border-color:#2f6b47; flex-direction:row-reverse}
.ea-sw.ea-an .ea-sw-kn{
  background:linear-gradient(180deg,#5fc98a,var(--eak-ok));
  box-shadow:0 2px 0 var(--eak-ok-s), 0 3px 6px rgba(0,0,0,.4);
}
.ea-sw.ea-an .ea-sw-wo{color:#8fe0b0; padding:0 12px 0 16px}
.ea-sw:focus-visible{outline:3px solid #7ab6ff; outline-offset:3px}

/* ── Reihe ────────────────────────────────────────────────────────────
   Knoepfe brauchen Luft: der Sockel steht 5 px unter der Flaeche und
   wuerde bei engem Abstand in den naechsten Knopf ragen. */
.ea-k-reihe{display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  margin:16px 0 20px}

@media (max-width:560px){
  /* Auf dem Telefon volle Breite -- nebeneinander wird jeder Knopf so
     schmal, dass die Beschriftung umbricht. */
  .ea-k-reihe{flex-direction:column; align-items:stretch}
  .ea-k-reihe .ea-k{width:100%}
  .ea-k-reihe .ea-kr{align-self:flex-start}
}

/* Alter Bestand: solange eine Maske noch nicht umgestellt ist, bleibt sie
   unveraendert. Diese Datei definiert NUR ea-*-Klassen und fasst nichts an,
   was es schon gibt. */