# Usługi / Leistungen — `/pl/uslugi` i `/de/leistungen` (page id 2)

Bloki: `pageHeader` → `servicesDetailed` → `eligibility` → `finalCta`.
Wzorce animacji: patrz [01-design-system-impeccable.md](./01-design-system-impeccable.md) §4.

---

## 1. PageHeader (`blockType: pageHeader`)

**[ZACHOWAĆ treść]** „Kompleksowe rozliczenia podatkowe dla Polaków w Niemczech".

**Layout:** prosty nagłówek strony — H1 + subtitle, wycentrowany lub do lewej
(spójnie z resztą page-headerów w serwisie), bez zdjęcia tła (to strona typu
„Read/Persuade mieszany" — treść ma się liczyć, nie hero-wizual po raz drugi).

**Tło:** cienka linia `line-draw` pod nagłówkiem jako separator do sekcji usług
— to page-header, nie hero, więc bez tekstury/parallax, subtelniej niż na home.

**Animacja:** `reveal-up`, pojedyncze wejście, bez stagger (dwa elementy: H1 + subtitle).

---

## 2. ServicesDetailed (`blockType: servicesDetailed`)

**[ZACHOWAĆ treść — 7 usług]** Deklaracja podatkowa, wstępne obliczenie
zwrotu, kontrola decyzji, odwołania, całoroczne doradztwo, klasa podatkowa,
ulgi/Kindergeld. Treść konkretna i kompletna — nie zmieniam.

**Ryzyko anty-slop:** 7 identycznych kart z ikoną = klasyczny wzorzec
„identical card grids" + „icon tile stacked above heading" z katalogu. Musi
zostać rozbite:

**Layout — dwupoziomowa hierarchia zamiast jednej siatki:**
- **Usługa #1 „Sporządzenie deklaracji podatkowej"** wyróżniona jako pozycja
  główna, szersza karta (2 kolumny szerokości na desktopie), z ikoną OBOK
  tytułu (nie nad, nie w kwadratowym tile) i pełnym opisem widocznym od razu —
  to jest usługa, po którą przychodzi 90% odwiedzających.
- Pozostałe 6 usług w siatce 2×3 (desktop) / 1 kolumna (mobile), karty
  jednolite ale mniejsze niż wyróżniona, z ikoną małą, inline z tytułem.
- Każda karta ma cienki górny akcent (`line-draw` przy wejściu w viewport),
  NIE grubą kolorową krawędź z boku (zakaz side-tab).

**Ikony:** już zmapowane w danych (`fileText`, `calculator`, `shieldCheck`,
`scale`, `helpCircle`, `users`, `coins` — prawdopodobnie lucide-react, zgodnie
z resztą projektu). Renderować w kolorze `--accent-color`, rozmiar
proporcjonalny do tekstu (nie oversized — reguła „massive icons").

**Animacja:** `reveal-up` stagger 0.08s po kolei, karta wyróżniona wchodzi
jako pierwsza i lekko większa amplituda (24px zamiast 16px), żeby podkreślić
hierarchię ruchem, nie tylko rozmiarem.

---

## 3. Eligibility (`blockType: eligibility`)

**[ZACHOWAĆ treść]** „Dla kogo — zakres uprawnień wg §4 Nr. 11 StBerG" —
merytorycznie kompletna (kto może skorzystać / limity dochodów dodatkowych
18 000€/36 000€ / kto jest wykluczony). To jedna z najważniejszych sekcji na
całej stronie prawnie — Beratungsbefugnis jest podstawą działania firmy.

**Layout — kluczowe: to NIE jest sekcja marketingowa, to jest informacja
prawna, więc traktować wizualnie jak fragment dokumentu, nie jak feature-grid:**
- Dwie kolumny obok siebie: **„Kto może skorzystać"** (lista z ✓, kolor
  neutralny/zielonkawy stonowany, nie jaskrawy) vs **„Kogo NIE obejmują nasze
  uprawnienia"** (lista z ✕, kolor stonowany, nie agresywny czerwony — to nie
  jest błąd/ostrzeżenie, to fakt prawny).
- `limitationsText` (limity 18 000€/36 000€) jako osobny, wyraźnie
  wydzielony akapit między dwiema kolumnami a `legalNotice` — to najbardziej
  „techniczny" fragment i ludzie go pomijają, jeśli nie ma wizualnego zaczepu
  (np. cienka ramka, mała ikona dokumentu/paragrafu z boku).
- `legalNotice` (podstawa prawna) na samym dole, mniejszym tekstem, jako
  formalne domknięcie — jak stopka dokumentu prawnego, nie call-to-action.

**Tło:** delikatnie wydzielone od reszty strony (np. `--card-color` na całą
sekcję, cienka ramka `--border-color` dookoła) — sygnalizuje „to jest
oficjalna informacja, nie marketing".

**Animacja:** BEZ efektownego wejścia — `reveal-up` bardzo subtelny (8px, nie
24px) albo brak animacji w ogóle. To sekcja do przeczytania w spokoju, ruch
tu odwracałby uwagę od treści prawnej.

**Uwaga treściowa (nie wizualna, ale ważna):** limity 18 000€/36 000€ i
podstawa `§4 Nr. 11 StBerG` to dane prawne, które mogą się zmieniać rok do
roku — do weryfikacji z klientem przed publikacją, że kwoty są aktualne na
2026 (nie kopiować bez sprawdzenia, to nie jest zakres tego planu wizualnego).

---

## 4. FinalCTA

**[ZACHOWAĆ treść]** identyczny wzorzec jak w [02-strona-glowna.md](./02-strona-glowna.md)
§10 — spójność między stronami jest tu ważniejsza niż wariacja.