/* ============================================================
   tokens.css — DIE EINE DATEI FÜR DAS AUSSEHEN
   Farben, Schriftgrößen, Abstände, Radien, Schatten.
   Hier ändern = überall geändert.
   ============================================================ */
:root{
  /* ── Farbe ── */
  --me-primary:        #1A6B50;  /* Marke: Akzente, Icons, Links */
  --me-primary-strong: #14503C;  /* Knopfflächen — Weiß darauf 8,5:1 */
  --me-primary-deep:   #0E3F2E;
  --me-primary-tint:   #E8F2ED;
  --me-dark-1:         #123C2D;  /* dunkle Bänder */
  --me-dark-2:         #0B2A20;

  --me-accent:         #8F4E2C;  /* Lehm: Angehörige, Hinweise */
  --me-accent-strong:  #7A4023;
  --me-accent-tint:    #FBF6F2;
  --me-accent-tint-2:  #F6EFE9;

  --me-bg:             #F2F1EA;  /* Seitengrund */
  --me-bg-alt:         #EFEEE6;  /* zweiter Grund */
  --me-surface:        #FFFFFF;
  --me-surface-soft:   #F4F7F5;
  --me-surface-soft-2: #EDF2EF;
  --me-border:         rgba(26,107,80,.12);
  --me-border-soft:    rgba(16,26,22,.10);

  --me-ink:            #101A16;  /* Fließtext — 15,8:1 auf --me-bg */
  --me-ink-body:       #31413A;  /* Sekundär — 9,1:1 */
  --me-ink-muted:      #4A5A52;  /* Beiwerk — 7,2:1 */
  --me-on-dark:        #FFFFFF;
  --me-on-dark-soft:   rgba(255,255,255,.78);
  --me-on-dark-mint:   #7FD4AC;
  --me-focus:          #0B5FBF;

  /* ── Schrift ── */
  --me-font-body: 'Atkinson Hyperlegible Next','Atkinson Hyperlegible',Verdana,sans-serif;
  --me-font-head: 'Literata',Georgia,'Times New Roman',serif;

  --me-fs-display: clamp(38px, 5.2vw, 66px);
  --me-fs-h2:      clamp(32px, 3.6vw, 47px);
  --me-fs-h3:      clamp(22px, 1.9vw, 27px);
  --me-fs-lead:    clamp(19px, 1.6vw, 23px);
  --me-fs-body:    20px;   /* Grundschrift — bewusst 20 statt 16 */
  --me-fs-small:   17px;   /* kleinste zulässige Größe */
  --me-lh-body:    1.6;

  /* ── Maß & Form ── */
  --me-tap:        56px;   /* Mindesthöhe für alles Antippbare */
  --me-tap-lg:     68px;
  --me-r-sm:       18px;
  --me-r:          26px;
  --me-r-lg:       32px;
  --me-r-xl:       56px;
  --me-r-pill:     100px;
  --me-wrap:       1288px;
  --me-pad-x:      76px;
  --me-pad-y:      104px;

  /* ── Tiefe: gestaffelt und grün eingefärbt, nie grau ── */
  --me-sh-1: 0 1px 2px rgba(18,58,44,.04), 0 8px 22px rgba(18,58,44,.06);
  --me-sh-2: 0 2px 4px rgba(18,58,44,.05), 0 12px 32px rgba(18,58,44,.08);
  --me-sh-3: 0 3px 6px rgba(18,58,44,.08), 0 16px 40px rgba(18,58,44,.10), 0 44px 90px rgba(18,58,44,.08);
  --me-sh-btn:  0 3px 6px rgba(18,58,44,.18), 0 16px 38px rgba(18,58,44,.26);
  --me-sh-dark: 0 2px 4px rgba(0,0,0,.10), 0 14px 34px rgba(0,0,0,.16);
}

@media (max-width: 900px){
  :root{ --me-pad-x:20px; --me-pad-y:56px; --me-r-xl:38px; }
}