# Design system Konference péče o pozůstalé

Tento soubor popisuje design system Konference péče o pozůstalé. Při návrhu nebo kódu se drž jeho pravidel, používej jen uvedené barvy, písma a komponenty a jejich HTML přebírej beze změny tříd. Nevymýšlej nové barvy ani styly.

Odborná konference o péči o pozůstalé. Program, přednášející a informace o jednotlivých ročnících.

Písmo: Instrument Sans. Živý web: https://konferencepp.cz/. Katalog: https://www.romankacerek.cz/dev/designsystem/konferencepp/. Sestaveno 11. 11. 2026.

## Soubory

Načti je v tomto pořadí:

- https://www.romankacerek.cz/dev/designsystem/konferencepp/site/assets/css/web.css
- https://www.romankacerek.cz/dev/designsystem/konferencepp/site/assets/js/web.js

Relativní cesty v HTML níže vedou do https://www.romankacerek.cz/dev/designsystem/konferencepp/site/.

## Pravidla

### Barvy

- Web má jedinou značkovou barvu, modrou #1c26ac. Je to text, ohraničení, tlačítka, ikony i velké plochy (menu, pás s fotkou, patička).
- Podklad stránky je bílý #ffffff. Na modrém je všechno bílé.
- Žádné další barvy ani přechody nepřidávejte. Zastínění pod menu a lightboxem je jen průhledná černá `rgba(0,0,0,.4)` a `rgba(0,0,0,.85)`.

### Písmo

- Jediná rodina Instrument Sans, nahraný je jen řez 400 se stylistickou sadou `ss01`. Tučné a polotučné dopočítává prohlížeč.
- Základ je 22 px / 34 px, nadpisy `h1` 54 px, `h2` 38 px, `h3` 26 px, `h4` 64 px (rubriky Program, Přednášející, Partneři, Kontakt), `h5` 32 px.
- Menší text je třída `male` (.85 em). Odkazy v textu jsou tučné a podtržené tenkou čarou.

### Rozvržení

- Obsah je v kontejneru `w` o šířce do 1780 px s bočním okrajem 60 px. Sloupce `g` a `c` jsou flex, mezery přes `g--60`, `g--40`, `g--0`.
- Rozestupy se skládají z pomocných tříd `pt100`, `pb60`, `mb40` a jejich variant pro tablet `t-` a telefon `p-`. Šířky sloupců `w25`, `w50`, `w75`.
- Sekce odděluje tenká modrá linka `ln` (2 px) přes celou šířku.
- Hlavička je pevná, na šířkách do 1270 px se navigace mění na tlačítko Menu a boční panel. Patička je od 1000 px odkrývaná zpod obsahu.

### Tvary

- Tlačítka `btn` mají rádius 50 px, štítky `badge` 20 px, kulaté sociální ikony `sit` 50 %.
- Fotky osob mají třídu `maska maska--bublina`, tedy tvar z loga (zaoblený obdélník s ocáskem). Fotka v kontaktu používá `maska--bublina-velka`.
- Citát `blockquote` má vlevo 4 px modrý proužek. Čísla v seznamu jsou modrá kolečka.
- Bez stínů.

### Tlačítka

- Hlavní tlačítko `btn` je plné modré s bílým textem, při najetí se obrátí na bílé s modrým textem. Druhý typ tlačítka web nemá.
- Štítky `badge--plna` a `badge--obrys` označují Přednášku a Workshop.

### Fotografie

- Portréty jsou čtvercové až mírně svislé ve WebP, ořez přes `object-position`. Pás `r--pozadi` nese celostránkovou fotku s bílým textem.
- Loga partnerů jsou SVG, centrovaná v mřížce `g--partneri`.

### Jazyk

- Texty jsou česky, formálně, s nezlomitelnými mezerami za jednopísmennými předložkami. Pro tuto cílovou skupinu používejte slova ztráta a pozůstalý, vyhýbejte se smrti a ovdovění.

## Barvy

| Název | Hodnota | V tmavém tématu | Použití |
| --- | --- | --- | --- |
| modrá | #1c26ac |  | Text, tlačítka, linky, ikony, menu, pás s fotkou a patička. |
| bílá | #ffffff |  | Podklad stránky a hlavičky, text na modrém. |
| zastínění menu | rgba(0,0,0,.4) |  | Pozadí za bočním panelem menu. |
| zastínění lightboxu | rgba(0,0,0,.85) |  | Pozadí zvětšené fotky. |

## Typografie

| Styl | Hodnoty | Použití |
| --- | --- | --- |
| H1 | viz CSS | Hlavní nadpis ročníku |
| H2 | viz CSS | Datum a místo |
| H3 | viz CSS | Perex pod nadpisem |
| H4 | viz CSS | Rubrika stránky |
| H5 | viz CSS | Čas a název bloku programu |
| Text | viz CSS | Tělo textu |
| Malý text | viz CSS | Kontakty a popisy |
| Menu | viz CSS | Hlavní navigace |
| Tlačítko | viz CSS | Text tlačítka |
| Patička | viz CSS | Právní řádek |

## Mezery a šířky

| Název | Hodnota | Použití |
| --- | --- | --- |
| boční okraj | 60px | Odsazení kontejneru `w` na počítači, na tabletu šířka 88 %. |
| mezera sloupců | 60px | Třída `g--60`. |
| výška hlavičky | 126px | 74 px do 999 px. |
| odsazení sekce | 100px | Třídy `pt100` a `pb100`, na tabletu 80, na telefonu 60. |

## Rádiusy

| Název | Hodnota | Použití |
| --- | --- | --- |
| tlačítka | 50px | Třída `btn`. |
| štítky | 20px | Třída `badge`. |
| kulaté prvky | 50% | Sociální ikony a čísla v seznamu. |

## Komponenty: Navigace

### Hlavička s navigací

Bílá pevná hlavička s logem a menu. Třídy: `hdr`, `hdr__logo`, `nav`, `hdr__menu`, `hdr__lines`.

```html
<header class="hdr">
<a class="hdr__logo" href="#"><img alt="Konference péče o pozůstalé" height="73" src="assets/foto/logo-konferencepp.svg" width="241"/></a>
<nav aria-label="Hlavní menu" class="nav">
<ul>
<li><a aria-current="page" href="#">Konference 2027</a></li>
<li><a href="#">Konference 2026</a></li>
<li><a href="#">Konference 2025</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<button aria-controls="ocm" aria-expanded="false" class="hdr__menu" type="button">Menu<span aria-hidden="true" class="hdr__lines"><i></i><i></i><i></i></span></button>
</header>
```

### Boční panel menu

Modrý panel s velkými odkazy a podtržením při najetí. Třídy: `ocm`, `ocm__panel`, `ocm__menu`, `ocm__widget`.

```html
<div class="ocm" id="ocm">
<div class="ocm__bg"></div>
<div aria-label="Menu" aria-modal="true" class="ocm__panel" role="dialog">
<button aria-label="Zavřít menu" class="ocm__close" type="button"><span aria-hidden="true" class="hdr__lines"><i></i><i></i><i></i></span></button>
<ul class="ocm__menu">
<li><a aria-current="page" href="#">Konference 2027</a></li>
<li><a href="#">Konference 2026</a></li>
<li><a href="#">Konference 2025</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
<ul class="ocm__widget">
<li><a href="#">Osobní údaje</a></li>
</ul>
</div>
</div>
```

### Patička

Modrá patička s fotkou a bílým textem, na počítači odkrývaná zpod obsahu. Třídy: `ftr`, `ftr__in`, `ftr__logo`, `ftr__txt`.

```html
<footer class="ftr">
<div class="ftr__in">
<a class="ftr__logo" href="#"><img alt="Konference péče o pozůstalé" height="60" src="assets/foto/logo-konferencepp-bile.svg" width="196"/></a>
<p class="ftr__txt"><span data-rok="">2026</span> © <a href="#" rel="noopener" target="_blank">Nadační fond Vrba</a>, <a href="#" target="_blank">Osobní údaje</a><br/>Vstupenky zajišťuje <a href="#" rel="noopener" target="_blank">smsticket.cz</a><br/><span class="ftr__credit">Design <a href="#" rel="noopener" target="_blank" title="Grafické a marketingové studio">KACER STUDIO</a></span></p>
</div>
</footer>
```

## Komponenty: Úvod

### Úvod ročníku

Velký nadpis, perex, odkaz a sociální ikony. Třídy: `r`, `tx`, `mw800`, `sity`, `sit`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt40 p-pt20 pb60 t-pb40">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb">
<div class="g">
<div class="c">
<div class="tx"><h1>Konference péče o pozůstalé 2027</h1></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c">
<div class="tx mw800"><h3><strong>5. ročník Konference péče o pozůstalé se bude konat v úterý 15. 6. 2027 v OREA Resort Santon u Brněnské přehrady.</strong></h3></div>
<div class="sp sh20"></div>
<div class="tx mw800"><p>O programu a možnosti nákupu vstupenek vás budeme informovat na webu <a href="#" rel="noopener" target="_blank">www.nadacnifondvrba.cz</a> a na sociálních sítích.</p></div>
<div class="sp sh40"></div>
<ul class="sity pt20"><li><a aria-label="Facebook" class="sit" href="#" rel="noopener" target="_blank"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.5-1.5h1.6V4.4c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21h3.1z"></path></svg></a></li><li><a aria-label="Instagram" class="sit" href="#" rel="noopener" target="_blank"><svg aria-hidden="true" stroke="currentColor" stroke-width=".35" viewbox="0 0 24 24"><path d="M12 7.2A4.8 4.8 0 1 0 12 16.8 4.8 4.8 0 0 0 12 7.2zm0 7.9a3.1 3.1 0 1 1 0-6.2 3.1 3.1 0 0 1 0 6.2zM17 5.9a1.1 1.1 0 1 0 0 2.3 1.1 1.1 0 0 0 0-2.3zM21.4 8c-.1-1.5-.4-2.8-1.5-3.9S17.5 2.7 16 2.6c-1.5-.1-6.2-.1-7.9 0-1.5.1-2.8.4-3.9 1.5S2.7 6.5 2.6 8c-.1 1.5-.1 6.2 0 7.9.1 1.5.4 2.8 1.5 3.9s2.4 1.4 3.9 1.5c1.5.1 6.2.1 7.9 0 1.5-.1 2.8-.4 3.9-1.5s1.4-2.4 1.5-3.9c.1-1.6.1-6.3 0-7.9zm-2 9.6a3.2 3.2 0 0 1-1.8 1.8c-1.3.5-4.3.4-5.6.4s-4.4.1-5.6-.4a3.2 3.2 0 0 1-1.8-1.8c-.5-1.3-.4-4.3-.4-5.6s-.1-4.4.4-5.6a3.2 3.2 0 0 1 1.8-1.8c1.3-.5 4.3-.4 5.6-.4s4.4-.1 5.6.4a3.2 3.2 0 0 1 1.8 1.8c.5 1.3.4 4.3.4 5.6s.1 4.4-.4 5.6z"></path></svg></a></li></ul>
</div>
</div>
</div>
<div class="ir t-pt20">
<div class="g">
<div class="c h m-h">
<div class="tx h m-h"><h2><strong>15. června 2027</strong></h2> <h2><a href="#" rel="noopener" target="_blank">OREA Resort Santon – Brno</a></h2></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Úvod s tlačítkem

Pořadatelé, nadpis a tlačítko k programu. Třídy: `tx--i`, `tl`, `btn`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt40 p-pt20 pb60 t-pb40">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb pb60 t-pb40">
<div class="g">
<div class="c">
<div class="tx male tx--i mw1215"><p><strong>Nadační fond Vrba</strong> a spolek <strong>Zpátky do života</strong> pořádají pod záštitou <strong>Ministerstva práce a sociálních věcí České republiky</strong>, <strong>JUDr. Markéty Vaňkové</strong>, primátorky města Brna a <strong>Ing. Romana Celého, DiS.</strong>, náměstka hejtmana Jihomoravského kraje, 4. ročník</p></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c">
<div class="tx"><h1>Konference péče o pozůstalé 2026</h1></div>
</div>
</div>
</div>
<div class="ir r--mb">
<div class="g">
<div class="c">
<div class="tl"><a class="btn" href="#">Zobrazit program</a></div>
</div>
</div>
</div>
<div class="ir t-pt20">
<div class="g">
<div class="c h m-h">
<div class="tx h m-h"><h2><strong>18. června 2026</strong></h2> <h2><a href="#" rel="noopener" target="_blank">Hotel Passage – Brno</a></h2></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Pás s fotkou a datem

Celoplošná fotka pod úvodem s bílým datem a místem. Třídy: `r--full`, `r--pozadi`, `sp sh460`.

```html
<main class="obsah" id="obsah"><section class="r r--full r--pozadi">
<div class="w"><div class="g">
<div class="c">
<div class="ir r--mb pt120">
<div class="g">
<div class="c t-h p-h">
<div class="tx t-h p-h tx--m"><h2><strong>18. června 2026</strong></h2></div>
<div class="tx t-h p-h tpt20"><h2><a href="#" rel="noopener" target="_blank">Hotel Passage<br/>Brno</a></h2></div>
</div>
</div>
</div>
<div class="sp sh460 t-sh300 p-sh150"></div>
</div>
</div></div>
</section></main>
```

## Komponenty: Prvky

### Tlačítka

Plné modré kulaté tlačítko, při najetí se obrací. Třídy: `btn`, `tl`.

```html
<div style="padding:30px 60px"><a class="btn" href="#">Zobrazit program</a><a class="btn" href="#">Vstupenky</a></div>
```

### Štítky

Označení typu příspěvku, plný a obrysový. Třídy: `badges`, `badge badge--plna`, `badge badge--obrys`.

```html
<div style="padding:30px 60px"><div class="badges"><span class="badge badge--plna">Přednáška</span><span class="badge badge--obrys">Workshop</span></div></div>
```

### Sociální ikony

Kulaté modré tlačítko s ikonou sítě. Třídy: `sity`, `sit`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt40 p-pt20 pb60 t-pb40"><div class="w"><div class="g"><div class="c"><div class="ir r--mb"><div class="g"><div class="c"><ul class="sity pt20"><li><a aria-label="Facebook" class="sit" href="#" rel="noopener" target="_blank"><svg aria-hidden="true" viewbox="0 0 24 24"><path d="M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.5-1.5h1.6V4.4c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21h3.1z"></path></svg></a></li><li><a aria-label="Instagram" class="sit" href="#" rel="noopener" target="_blank"><svg aria-hidden="true" stroke="currentColor" stroke-width=".35" viewbox="0 0 24 24"><path d="M12 7.2A4.8 4.8 0 1 0 12 16.8 4.8 4.8 0 0 0 12 7.2zm0 7.9a3.1 3.1 0 1 1 0-6.2 3.1 3.1 0 0 1 0 6.2zM17 5.9a1.1 1.1 0 1 0 0 2.3 1.1 1.1 0 0 0 0-2.3zM21.4 8c-.1-1.5-.4-2.8-1.5-3.9S17.5 2.7 16 2.6c-1.5-.1-6.2-.1-7.9 0-1.5.1-2.8.4-3.9 1.5S2.7 6.5 2.6 8c-.1 1.5-.1 6.2 0 7.9.1 1.5.4 2.8 1.5 3.9s2.4 1.4 3.9 1.5c1.5.1 6.2.1 7.9 0 1.5-.1 2.8-.4 3.9-1.5s1.4-2.4 1.5-3.9c.1-1.6.1-6.3 0-7.9zm-2 9.6a3.2 3.2 0 0 1-1.8 1.8c-1.3.5-4.3.4-5.6.4s-4.4.1-5.6-.4a3.2 3.2 0 0 1-1.8-1.8c-.5-1.3-.4-4.3-.4-5.6s-.1-4.4.4-5.6a3.2 3.2 0 0 1 1.8-1.8c1.3-.5 4.3-.4 5.6-.4s4.4-.1 5.6.4a3.2 3.2 0 0 1 1.8 1.8c.5 1.3.4 4.3.4 5.6s.1 4.4-.4 5.6z"></path></svg></a></li></ul></div></div></div></div></div></div></section></main>
```

### Oddělovací linka

Dvoupixelová modrá linka přes celou šířku. Třídy: `r--fullc`, `ln`.

```html
<main class="obsah" id="obsah"><section class="r r--fullc pt20 t-pt0 pb20 t-pb0 gpx60 t-gpx0">
<div class="g g--0 g--top">
<div class="c">
<hr class="ln mt1 t-mt2 mb1 t-mb2"/>
</div>
</div>
</section></main>
```

## Komponenty: Obsah

### Nadpis rubriky

Velký nadpis `h4` s rubrikou, například Program. Třídy: `ir`, `tx`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt80 t-pt60 pb80 t-pb60 p-pb40" id="program"><div class="w"><div class="g"><div class="c"><div class="ir r--mb pb40 p-pb20">
<div class="g">
<div class="c">
<div class="tx"><h4>Program</h4></div>
</div>
</div>
</div></div></div></div></section></main>
```

### Perex konference

Tučný `h3` s úvodní větou. Třídy: `tx--i`, `mw1035`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt100 t-pt60 pb40">
<div class="w"><div class="g">
<div class="c">
<div class="ir">
<div class="g">
<div class="c">
<div class="tx tx--i mw1035"><h3><strong>Konference zaměřená na problematiku péče o pozůstalé rodiny a praktické aspekty práce s pozůstalými, určená pro odbornou i laickou veřejnost.<br/></strong></h3></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Text s číslovaným seznamem

Dlouhý právní text s modrými očíslovanými kolečky. Třídy: `mwd960`, `tx`, `ol`.

```html
<main class="obsah" id="obsah"><section class="r pt80 t-pt60 p-pt40 pb100 t-pb80 p-pb40">
<div class="w"><div class="g">
<div class="c">
<div class="ir mwd960">
<div class="g">
<div class="c">
<div class="tx tx--m"><h3>Provozovatel webu a správce osobních údajů, Nadační fond Vrba, Nedvědice 247, IČ: 05057281, info@nadacnifondvrba.cz, +420 725 062 763</h3></div>
<div class="sp sh20"></div>
<div class="tx"><p><strong>Jaké osobní údaje zpracováváme?</strong></p> <p>V souladu se zákonem č. 101/2000 Sb., o ochraně osobních údajů, a nařízením Evropského parlamentu a Rady (EU) č. 2016/679 (dále jen „Nařízení“), můžeme zpracovávat následující údaje:</p> <ol> <li>jméno a příjmení</li> <li>e-mailovou adresu</li> <li>telefonní číslo</li> <li>datum narození (pokud je to relevantní)</li> <li>fakturační/firemní údaje (pokud je to relevantní)</li> <li>adresu bydliště nebo kontaktní adresu (pokud je to relevantní)</li> </ol> <p><strong>Účel a právní základ zpracování</strong></p> <p>Osobní údaje účastníků a přednášejících zpracováváme za účelem:</p> <ol> <li>plnění smlouvy</li> <li>organizace a realizace akce</li> <li>poskytování nezbytných informací účastníkům</li> <li>vystavení certifikátu účastníkovi akce</li> </ol> <p>Zpracování osobních údajů probíhá na základě čl. 6 odst. 1 písm. b) Nařízení – tedy z důvodu nezbytného plnění smlouvy.</p> <p><strong>Doba uchování osobních údajů</strong></p> <p>Osobní údaje uchováváme po dobu <strong>10 let</strong> od ukončení akce, pokud jiný právní předpis nevyžaduje delší uchování.</p> <p><strong>Bezpečnost a sdílení osobních údajů</strong></p> <p>Vaše údaje uchováváme v zabezpečeném cloudovém řešení se servery umístěnými v Evropské unii nebo v sídle společnosti. Sdílíme je pouze s důvěryhodnými externími partnery, a to na základě smlouvy o zpracování osobních údajů.</p> <p><strong>Příjemci (zpracovatelé) osobních údajů:</strong></p> <ul> <li>Zaměstnanci pořadatele akce</li> <li>Poskytovatel služeb pro distribuci vstupenek – <a href="#" rel="noopener" target="_blank">smsticket s.r.o.</a></li> <li>Dodavatel vývoje a správy webových stránek – <a href="#" rel="noopener" target="_blank">KACER STUDIO s.r.o.</a></li> <li>Účetní oddělení</li> </ul> <p><strong>Obchodní sdělení</strong></p> <p>Na váš e-mail nebo telefonní číslo můžeme zasílat novinky a obchodní sdělení v souladu s § 7 odst. 3 zákona č. 480/2004 Sb., pokud tomu nevyjádříte nesouhlas. Odběr těchto sdělení můžete kdykoliv odhlásit prostřednictvím e-mailu nebo kliknutím na odkaz v e-mailu.</p> <p><strong>Vaše práva</strong></p> <p>Podle zákona o ochraně osobních údajů máte právo:</p> <ul> <li>získat informace o tom, jaké vaše údaje zpracováváme, včetně kopie těchto údajů,</li> <li>požadovat vysvětlení ohledně zpracování,</li> <li>žádat opravu nebo aktualizaci údajů,</li> <li>požádat o výmaz osobních údajů (což může vést k ukončení jednání o smlouvě),</li> <li>podat stížnost u Úřadu pro ochranu osobních údajů nebo se obrátit na soud.</li> </ul> <p><strong>Kontakt na správce</strong></p> <p>Své požadavky nebo dotazy ohledně zpracování osobních údajů můžete zasílat na e-mail <strong><a rel="noopener">asistentka@nadacnifondvrba.cz</a></strong>. V případě stížností na porušení právních předpisů se můžete obrátit na <strong>Úřad pro ochranu osobních údajů</strong>. Kontaktní údaje naleznete na <a href="#" rel="noopener" target="_new">www.uoou.cz</a>.</p></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Stránka 404

Text a ilustrace vedle sebe, na tabletu obráceně. Třídy: `e404`, `g--rev`, `cpl5p`.

```html
<main class="obsah" id="obsah"><section class="r e404 pt140 t-pt80 p-pt60 pb80 t-pb20 p-pb0">
<div class="w"><div class="g g--mid g--rev">
<div class="c w50 t-w100 cpl5p">
<div class="tx tx--m tx--i mw680"><h1><strong>Bohužel, to, co jste hledali, už tady není…</strong></h1></div>
<div class="ir pt20 pb20">
<div class="g">
<div class="c">
<div class="tx tx--i mw760"><p>Zkuste se vrátit <strong><a href="#">zpět na začátek</a></strong>.</p></div>
</div>
</div>
</div>
</div>
<div class="c w50 t-w100 t-cmb60">
<div class="img iw400 t-iw350 p-iw260 img--c"><img alt="Chyba 404" height="600" src="assets/foto/chyba-404.webp" width="543"/></div>
</div>
</div></div>
</section></main>
```

## Komponenty: Program

### Řádek programu s přednáškami

Čas vlevo, název bloku a přednášky s ikonou vpravo. Třídy: `w25`, `w75`, `iwt`, `iwt__t`, `ln`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt80 t-pt60 pb80 t-pb60 p-pb40" id="program"><div class="w"><div class="g"><div class="c"><div class="ir r--mb">
<div class="g">
<div class="c w25 p-w100 p-cmb25">
<div class="tx"><h5>9:15 – 10:00</h5></div>
</div>
<div class="c w75 p-w100">
<div class="tx tx--m"><h5><strong>Spirituální péče </strong></h5></div>
<div class="iwt mb24"><img alt="Přednáška" height="35" src="assets/foto/ikona-prednaska.svg" width="35"/><div class="iwt__t"><strong>Téma: Spirituální rozměr umírání</strong> <p><a href="#">PhDr. ThLic. Marta Hošťálková, Th.D., Ph.D.</a> </p></div></div>
<div class="iwt mb24"><img alt="Přednáška" height="35" src="assets/foto/ikona-prednaska.svg" width="35"/><div class="iwt__t"><strong>Téma: Nemocniční kaplan jako průvodce pozůstalých</strong> <p><a href="#">Mgr. Michaela Kadlčíková, DiS.</a>, <a href="#">Bc. Vít Kadlčík</a> </p></div></div>
<div class="iwt"><img alt="Přednáška" height="35" src="assets/foto/ikona-prednaska.svg" width="35"/><div class="iwt__t"><strong>Téma: Malovaná rakev s příběhem: jak může poslední rozloučení odrážet život člověka</strong> <p><a href="#">Mgr. Markéta Pešková</a> </p></div></div>
</div>
</div>
</div></div></div></div></section></main>
```

### Řádek programu s popisem

Blok s názvem a krátkým popisem, například přestávka. Třídy: `w25`, `w75`, `tx--m`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt80 t-pt60 pb80 t-pb60 p-pb40" id="program"><div class="w"><div class="g"><div class="c"><div class="ir r--mb">
<div class="g">
<div class="c w25 p-w100 p-cmb25">
<div class="tx"><h5>10:00 – 10:30</h5></div>
</div>
<div class="c w75 p-w100">
<div class="tx tx--m"><h5><strong>Přestávka <img alt="☕️" class="emoji" height="18" src="assets/emoji/2615.svg" width="18"/><br/></strong></h5></div>
<div class="tx"><p>Voda, káva, čaj a drobné občerstvení.</p></div>
</div>
</div>
</div></div></div></div></section></main>
```

### Citát

Poznámka s modrým svislým proužkem. Třída: `blockquote`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt80 t-pt60 pb80 t-pb60 p-pb40" id="program"><div class="w"><div class="g"><div class="c"><div class="ir r--mb" id="workshopy">
<div class="g">
<div class="c w25 p-w100 p-cmb25">
<div class="tx"><h5>13:00 – 15:00</h5></div>
</div>
<div class="c w75 p-w100">
<div class="tx tx--m"><h5><strong>Odpolední workshopy <img alt="🤝" class="emoji" height="18" src="assets/emoji/1f91d.svg" width="18"/><br/></strong></h5></div>
<div class="tx"><blockquote><p> <strong>Během workshopů jsou možné individuální konzultace</strong> s <a href="#">Mgr. Petrou Glosr Cvrkalovou</a>, ředitelkou pořádajících organizací. </p></blockquote></div>
</div>
</div>
</div></div></div></div></section></main>
```

## Komponenty: Přednášející

### Karta přednášejícího

Fotka v bublině, štítky, jméno a medailonek. Třídy: `img`, `maska maska--bublina`, `badges`, `badge`, `cmb60`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt100 t-pt80 p-pt60 pb20 t-pb0" id="prednasejici"><div class="w"><div class="g"><div class="c"><div class="ir pb60 t-pb40"><div class="g g--60 g--top"><div class="c w50 t-w100 cmb60">
<div class="tx tx--m"><p><a name="peskova"></a></p></div>
<div class="img mb40 p-mb25 iw270 t-iw200"><img alt="Mgr. Markéta Pešková" class="maska maska--bublina" height="299" src="assets/foto/prednasejici-marketa-peskova.webp" width="270"/></div>
<div class="badges"><span class="badge badge--plna">Přednáška</span><span class="badge badge--obrys">Workshop</span></div>
<div class="tx tx--m"><h5><strong>Mgr. Markéta Pešková</strong></h5></div>
<div class="tx male"><p>Markéta Pešková je výtvarnicí a autorkou projektu Malovaná rakev s příběhem. Ve své tvorbě přináší do oblasti pohřebnictví nový pohled. Místo anonymity nabízí osobní příběh, emoci a krásu i v posledním rozloučení. Ruční malbou rakví a uren pomáhá rodinám vytvořit důstojné a autentické rozloučení, které odráží život člověka, na kterého vzpomínají. Každé dílo vzniká jako jedinečný originál, nesoucí konkrétní příběh. Svoji práci vnímá jako poslání, ve kterém našla hluboký smysl. Věří, že způsob rozloučení má zásadní vliv na to, jak pozůstalí prožijí poslední chvíle i následné vyrovnání se se ztrátou. Jejím cílem je kultivovat vnímání smrti ve společnosti a ukázat, že i poslední cesta může být naplněná úctou, jemností a osobním významem. Takové rozloučení pomáhá uzavřít jednu životní kapitolu a odejít s pocitem, že se vše odehrálo podle srdce. V tom, co dělá, vidí malou tichou revoluci v tom, jak se loučíme.</p></div>
</div></div></div></div></div></div></section></main>
```

### Mřížka přednášejících

Dvousloupcová mřížka karet, na tabletu jeden sloupec. Třídy: `g g--60 g--top`, `w50`, `t-w100`.

```html
<main class="obsah" id="obsah"><section class="r r--mb pt100 t-pt80 p-pt60 pb20 t-pb0" id="prednasejici"><div class="w"><div class="g"><div class="c"><div class="ir pb60 t-pb40"><div class="g g--60 g--top">
<div class="c w50 t-w100 cmb60">
<div class="tx tx--m"><p><a name="peskova"></a></p></div>
<div class="img mb40 p-mb25 iw270 t-iw200"><img alt="Mgr. Markéta Pešková" class="maska maska--bublina" height="299" src="assets/foto/prednasejici-marketa-peskova.webp" width="270"/></div>
<div class="badges"><span class="badge badge--plna">Přednáška</span><span class="badge badge--obrys">Workshop</span></div>
<div class="tx tx--m"><h5><strong>Mgr. Markéta Pešková</strong></h5></div>
<div class="tx male"><p>Markéta Pešková je výtvarnicí a autorkou projektu Malovaná rakev s příběhem. Ve své tvorbě přináší do oblasti pohřebnictví nový pohled. Místo anonymity nabízí osobní příběh, emoci a krásu i v posledním rozloučení. Ruční malbou rakví a uren pomáhá rodinám vytvořit důstojné a autentické rozloučení, které odráží život člověka, na kterého vzpomínají. Každé dílo vzniká jako jedinečný originál, nesoucí konkrétní příběh. Svoji práci vnímá jako poslání, ve kterém našla hluboký smysl. Věří, že způsob rozloučení má zásadní vliv na to, jak pozůstalí prožijí poslední chvíle i následné vyrovnání se se ztrátou. Jejím cílem je kultivovat vnímání smrti ve společnosti a ukázat, že i poslední cesta může být naplněná úctou, jemností a osobním významem. Takové rozloučení pomáhá uzavřít jednu životní kapitolu a odejít s pocitem, že se vše odehrálo podle srdce. V tom, co dělá, vidí malou tichou revoluci v tom, jak se loučíme.</p></div>
</div>
<div class="c w50 t-w100 cmb60">
<div class="tx tx--m"><p><a name="bezdekovska"></a></p></div>
<div class="img mb40 p-mb25 iw270 t-iw200"><img alt="Marie Bezděkovská" class="maska maska--bublina" height="299" src="assets/foto/prednasejici-marie-bezdekovska.webp" width="270"/></div>
<div class="badges"><span class="badge badge--plna">Přednáška</span><span class="badge badge--obrys">Workshop</span></div>
<div class="tx tx--m"><h5><strong>Marie Bezděkovská</strong></h5></div>
<div class="tx male"><p>Marie Bezděkovská je průvodkyní v závěru života pro rodiny a jejich blízké. Skrze komplexní přístup se věnuje rodinám tak, aby potřebné informace, psychická pomoc a podpora šly ruku v ruce a nevylučovaly potřeby a přání jednotlivců. Věnuje se také péči pozůstalým rodinám a tématu pozůstalosti. Doprovází jednotlivce i rodiny v náročných obdobích nemoci, umírání a truchlení – s respektem, citlivostí a důrazem na jedinečnost každého příběhu.<br/>Lektoruje prožitkově-vzdělávací semináře zaměřené na péči v závěru života a komunikaci o smrti, a to jak pro veřejnost, tak pro organizace a jejich týmy v sociální a zdravotní oblasti. V rámci své činnosti spolupracuje s organizacemi i odborníky, kterým pomáhá rozvíjet kompetence v oblasti péče o umírající a pozůstalé. Ve své práci propojuje praktickou zkušenost s edukací a osvětou, aby se téma smrti a truchlení stávalo přirozenější součástí společnosti.</p></div>
</div>
<div class="c w50 t-w100 cmb40">
<div class="tx tx--m"><p><a name="gabrielova"></a></p></div>
<div class="img mb40 p-mb25 iw270 t-iw200"><img alt="PhDr. Alena Kovář Gabrielová, Ph.D." class="maska maska--bublina" height="299" src="assets/foto/prednasejici-alena-grabrielova.webp" width="270"/></div>
<div class="badges"><span class="badge badge--plna">Přednáška</span><span class="badge badge--obrys">Workshop</span></div>
<div class="tx tx--m"><h5><strong>PhDr. Alena Kovář Gabrielová, Ph.D.</strong></h5></div>
<div class="tx male"><p>Alena Kovář Gabrielová je sociální patoložkou, psychoterapeutkou a poradkyní pro pozůstalé. Působí také jako krizová interventka, mentorka a lektorka a je autorizovanou osobou pro profesní kvalifikaci MMR Poradce/poradkyně pro pozůstalé. Od roku 2016 vede soukromou praxi se zaměřením na práci se sebedestruktivními klienty a pozůstalými po tragické ztrátě. Ve své práci propojuje akademickou zkušenost s dlouholetou terapeutickou praxí. Je členkou České asociace pro psychoterapii, Asociace poradců pro pozůstalé, kde zároveň působí jako vedoucí vzdělávání, a České asociace transakční analýzy.</p></div>
</div>
<div class="c w50 t-w100 cmb60">
<div class="tx tx--m"><p><a name="kovarova"></a></p></div>
<div class="img mb40 p-mb25 iw270 t-iw200"><img alt="Mgr. Pavla Kovářová" class="maska maska--bublina" height="299" src="assets/foto/prednasejici-pavla-kovarova.webp" width="270"/></div>
<div class="badges"><span class="badge badge--plna">Přednáška</span></div>
<div class="tx tx--m"><h5><strong>Mgr. Pavla Kovářová</strong></h5></div>
<div class="tx male"><p>Pavla Kovářová vystudovala sociální politiku a práci a sociologii na Masarykově univerzitě v Brně. Dvacet let pracuje v sociální sféře v Jihomoravském kraji, od roku 2017 jako koordinátorka péče o duševní zdraví. Zaměřuje se na propojování odborníků z různých sektorů, mezioborovou spolupráci. Důraz klade na ochranu práv a kvalitu služeb. Její příspěvek bude věnován mezioborové spolupráci v oblasti duševního zdraví v Jihomoravském kraji a na představení modulu psychosociální podpory v aplikaci Záchranka v JMK.</p></div>
</div>
<div class="c w50 t-w100 cmb60">
<div class="tx tx--m"><p><a name="laskova"></a></p></div>
<div class="img mb40 p-mb25 iw270 t-iw200"><img alt="PhDr. Andrea Lásková" class="maska maska--bublina" height="299" src="assets/foto/prednasejiciandrea-laskova.webp" width="270"/></div>
<div class="badges"><span class="badge badge--plna">Přednáška</span></div>
<div class="tx tx--m"><h5><strong>PhDr. Andrea Lásková</strong></h5></div>
<div class="tx male"><p>Andrea Lásková je psychoterapeutkou, supervizorem, facilitátorkou, lektorkou a krizovou interventkou s více než 25letou zkušeností. Vystudovala sociální práci a sociologii na Masarykově univerzitě v Brně a rigorózní zkoušku ze sociální práce složila na KU v Ružomberoku. Dále absolvovala Psychodynamický psychoterapeutický výcvik, Postgraduální výcvik v Gestalt terapii, Výcvik v Rozvojové a Případové supervizi. Aktuálně pracuje jako soukromá psychoterapeutka a supervizor. Na Modré lince externě působí jako krizová interventka. Je spoluautorkou knih Internet jako cesta pomoci a Vítejte na chatu, můžete začít psát. Je členkou České asociace pro psychoterapii a Asociace supervizorů v pomáhajících profesích.</p></div>
</div>
<div class="c w50 t-w100 cmb60">
<div class="tx tx--m"><p><a name="steinlauf"></a></p></div>
<div class="img mb40 p-mb25 iw270 t-iw200"><img alt="JUDr. Barbora Steinlauf" class="maska maska--bublina" height="299" src="assets/foto/prednasejici-barbora-teinlauf.webp" width="270"/></div>
<div class="badges"><span class="badge badge--plna">Přednáška</span><span class="badge badge--obrys">Workshop</span></div>
<div class="tx tx--m"><h5><strong>JUDr. Barbora Steinlauf</strong></h5></div>
<div class="tx male"><p>Barbora Steinlauf je advokátkou specializující se na zdravotnické právo se zvláštním zájmem o právní otázky související s počátkem a závěrem života a smrtí. O těchto otázkách přednáší na lékařských fakultách, odborných konferencích nebo v rámci postgraduálního vzdělávání zdravotníků. Spolupracuje s mobilními a lůžkovými hospici, nemocničními paliativními týmy a odbornými společnostmi nebo neziskovými organizacemi, které se věnují problematice péče v závěru života. Vedle advokátní práce působí jako předsedkyně sekce pro etiku v paliativní péči ČSPM, je členkou Etické komise Ministerstva zdravotnictví a členkou Rady vlády pro lidská práva.</p></div>
</div>
<div class="c w50 t-w100 cmb60">
<div class="tx tx--m"><p><a name="kadlcik"></a></p></div>
<div class="img mb40 p-mb25 iw270 t-iw200"><img alt="Bc. Vít Kadlčík" class="maska maska--bublina" height="299" src="assets/foto/prednasejici-vit-kadlcik.webp" width="270"/></div>
<div class="badges"><span class="badge badge--plna">Přednáška</span><span class="badge badge--obrys">Workshop</span></div>
<div class="tx tx--m"><h5><strong>Bc. Vít Kadlčík</strong></h5></div>
<div class="tx male"><p>Vít Kadlčík vystudoval CMTF UP v Olomouci, od roku 2019 působí jako nemocniční kaplan v Krajské nemocnici T. Bati ve Zlíně. V rámci mezioborové spolupráce je k dispozici pacientům, jejich blízkým i zdravotnickému personálu; jeho práce stojí především na doprovázení, aktivním naslouchání a citlivé přítomnosti – často i v tichu, když slova nestačí. Je také součástí podpůrného a paliativního týmu nemocnice, poradcem pro pozůstalé a v roce 2023 získal ocenění „Osobnost nemocnice očima kolegyň a kolegů“ v kategorii nezdravotnických profesí. Je ženatý, chová včely a každoročně se účastní kardioplavby na Baťově kanále.</p></div>
</div>
<div class="c w50 t-w100 cmb60">
<div class="tx tx--m"><p><a name="kadlcikova"></a></p></div>
<div class="img mb40 p-mb25 iw270 t-iw200"><img alt="Mgr. Michaela Kadlčíková, DiS." class="maska maska--bublina" height="299" src="assets/foto/prednasejici-michaela-kadlcikova.webp" width="270"/></div>
<div class="badges"><span class="badge badge--plna">Přednáška</span><span class="badge badge--obrys">Workshop</span></div>
<div class="tx tx--m"><h5><strong>Mgr. Michaela Kadlčíková, DiS.</strong></h5></div>
<div class="tx male"><p>Michaela Kadlčíková je od roku 2019 zaměstnána v Baťově nemocnici na plný úvazek jako nemocniční kaplanka. Právě v tomto roce se díky iniciativě paní MUDr. Aleny Kočendové a podpoře vedení nemocnice začal formovat podpůrný a paliativní tým, jehož součástí jsou také nemocniční kaplani. Od roku 2019 probíhalo systematické vzdělávání díky grantové podpoře z fondu Avast, dnes Abakus, zaměřené na rozvoj paliativní medicíny v nemocnicích. Měla možnost absolvovat vzdělávací kurzy, které patří ke špičce v oblasti paliativní medicíny. Součástí jejího profesního rozvoje byl také kurz doprovázení pozůstalých, který zakončila zkouškou profesní kvalifikace „Poradce pro pozůstalé“. Pro její profesní i osobní formaci bylo zásadní vedení paní MUDr. Aleny Kočendové, paní dr. Marty Hošťálkové, tehdejší vedoucí týmu nemocničních kaplanů, pana Mgr. Karla Mikuláška i dalších členů Podpůrného paliativního týmu. Je vdaná a mámou tří úžasných dětí.</p></div>
</div>
<div class="c w50 t-w100 cmb60">
<div class="tx tx--m"><p><a name="hostalkova"></a></p></div>
<div class="img mb40 p-mb25 iw270 t-iw200"><img alt="PhDr. ThLic. Marta Hošťálková, Th.D., Ph.D." class="maska maska--bublina" height="299" src="assets/foto/prednasejici-hostalkova.webp" width="270"/></div>
<div class="badges"><span class="badge badge--plna">Přednáška</span><span class="badge badge--obrys">Workshop</span></div>
<div class="tx tx--m"><h5><strong>PhDr. ThLic. Marta Hošťálková, Th.D., Ph.D.</strong></h5></div>
<div class="tx male"><p>Marta Hošťálková deset let doprovázela pacienty, jejich blízké i zdravotníky jako nemocniční kaplan – nejprve ve Fakultní nemocnici Olomouc, později v Krajské nemocnici T. Bati. Tato zkušenost ji přivedla ke službě koordinátorky nemocničních kaplanů v Arcidiecézi olomoucké a k aktivnímu zapojení do budování a rozvoje kaplanské duchovní péče v nemocnicích a domovech pro seniory nejen na Moravě. Jako odborná asistentka na Lékařské fakultě Univerzity Palackého v Olomouci se věnuje výuce témat klinické etiky, duchovní péče, doprovázení pozůstalých a paliativní medicíny. V rámci JSME BLÍZKO VÁM – Institutu klinické pastorační péče, z.ú. se podílí na přípravě a vedení vzdělávacích kurzů pro zdravotníky, pracovníky sociálních služeb, dobrovolníky i další pomáhající profese. Její dlouhodobou motivací je pomáhat vytvářet prostředí, ve kterém člověk ani v nemoci, ztrátě či na konci života nezůstává sám.</p></div>
</div>
</div></div></div></div></div></section></main>
```

### Partneři

Mřížka log s popiskem, čtyři sloupce na počítači. Třídy: `g--partneri`, `imgodkaz`, `img--c`, `ta-c`.

```html
<main class="obsah" id="obsah"><section class="r r--fullc pt40 t-pt0 p-pt20 pb60 t-pb40 p-pb20 gpx8p">
<div class="g g--0 g--top">
<div class="c">
<div class="ir">
<div class="g g--0 g--partneri">
<div class="c w25 m-w50 p-w100 cmb60 ta-c">
<div class="img mb0 p-mb40 iw320 t-iw250 img--c"><a class="imgodkaz" href="#" rel="noopener" target="_blank"><img alt="Jihomoravský kraj" height="65" src="assets/foto/logo-jihomoravsky-kraj.svg" width="636"/></a></div>
<div class="sp sh40 t-sh20 p-sh0 t-mt20 t-mb20"></div>
<div class="tx male"><p><a href="#" rel="noopener" target="_blank">Jihomoravský kraj</a></p></div>
</div>
<div class="c w25 m-w50 p-w100 cmb60 ta-c">
<div class="img mb0 p-mb40 iw200 t-iw180 img--c"><a class="imgodkaz" href="#" rel="noopener" target="_blank"><img alt="Statutární město Brno" height="29" src="assets/foto/logo-mesto-brno.svg" width="128"/></a></div>
<div class="sp sh40 t-sh20 p-sh0 t-mt20 t-mb20"></div>
<div class="tx male"><p><a href="#" rel="noopener" target="_blank">Statutární město Brno</a></p></div>
</div>
<div class="c w25 m-w50 p-w100 cmb60 ta-c">
<div class="img mb0 p-mb40 iw302 m-iw320 t-iw250 img--c"><a class="imgodkaz" href="#" rel="noopener" target="_blank"><img alt="Nadace MONETA Clementia" height="18" src="assets/foto/logo-nadace-moneta.svg" width="136"/></a></div>
<div class="sp sh40 t-sh20 p-sh0 t-mt20 t-mb20"></div>
<div class="tx male"><p><a href="#" rel="noopener" target="_blank">Nadace MONETA Clementia</a></p></div>
</div>
<div class="c w25 m-w50 p-w100 cmb60 ta-c">
<div class="img mb0 p-mb40 iw250 t-iw200 img--c"><a class="imgodkaz" href="#" rel="noopener" target="_blank"><img alt="Ministerstvo práce a sociálních věcí" height="59" src="assets/foto/logo-mpsv.svg" width="157"/></a></div>
<div class="sp sh40 t-sh20 p-sh0 t-mt20 t-mb20"></div>
<div class="tx male"><p><a href="#" rel="noopener" target="_blank">Ministerstvo práce a sociálních věcí</a></p></div>
</div>
</div>
</div>
</div>
</div>
</section></main>
```

## Komponenty: Kontakt

### Kontakt s fotkou

Fotka v bublině a kontaktní údaje vedle sebe. Třídy: `g--60`, `g--mid`, `w50`, `male`.

```html
<main class="obsah" id="obsah"><section class="r pt100 t-pt80 p-pt60 pb40 t-pb20" id="kontakt">
<div class="w"><div class="g">
<div class="c">
<div class="ir pb60 t-pb40">
<div class="g g--60 g--mid">
<div class="c w50 t-w100 t-cmb60">
<div class="img iw500 m-iw460 t-iw400 p-iw250 img--c"><img alt="Kontakt" height="754" src="assets/foto/kontakt.webp" width="681"/></div>
</div>
<div class="c w50 t-w100 t-ta-c">
<div class="tx tx--m"><h4>Kontakt</h4></div>
<div class="sp sh20 p-sh0 t-mt20 t-mb20"></div>
<div class="tx male tx--m"><p><strong>Koordinátorka Konference péče o pozůstalé</strong><br/><a href="#">asistentka@nadacnifondvrba.cz</a><br/>+420 725 062 763</p></div>
<div class="tx male"><p><strong>Nadační fond Vrba</strong><br/>Nedvědice 247, 592 62<br/>IČ: 05057281<br/><a href="#" rel="noopener" target="_blank">www.nadacnifondvrba.cz</a></p></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

### Kontakt centrovaný

Kontaktní údaje na střed bez fotky. Třídy: `ta-c`, `male`, `tx--m`.

```html
<main class="obsah" id="obsah"><section class="r pt100 t-pt80 p-pt60 pb40 t-pb20" id="kontakt">
<div class="w"><div class="g">
<div class="c">
<div class="ir pb60 t-pb40">
<div class="g g--60 g--mid">
<div class="c ta-c">
<div class="tx tx--m"><h4>Kontakt</h4></div>
<div class="sp sh20 p-sh0"></div>
<div class="tx male tx--m"><p><strong>Koordinátorka Konference péče o pozůstalé</strong><br/><a href="#">asistentka@nadacnifondvrba.cz</a><br/>+420 725 062 763</p></div>
<div class="tx male"><p><strong>Nadační fond Vrba</strong><br/>Nedvědice 247, 592 62<br/>IČ: 05057281<br/><a href="#" rel="noopener" target="_blank">www.nadacnifondvrba.cz</a></p></div>
</div>
</div>
</div>
</div>
</div></div>
</section></main>
```

## Stránky

- Konference 2027: https://konferencepp.cz/
- Konference 2026: https://konferencepp.cz/konference-pece-o-pozustale-2026
- Konference 2025: https://konferencepp.cz/konference-pece-o-pozustale-2025
- Osobní údaje: https://konferencepp.cz/osobni-udaje
