@charset "utf-8";
/* =====================================================================
   UDZIAŁ — system projektowy makiety zielonyelektron.eu (wersja premium)
   Seria STRONY-WWW-ST-A2. Makieta HTML+CSS: zero JavaScriptu, zero zdjęć,
   zero znaków firmowych, zero formularzy. Wszystkie barwy przez zmienne.

   IDEA. Prąd w sieci nie ma adresu nadania — ma UDZIAŁ. To, co da się
   powiedzieć o pochodzeniu energii, jest zawsze proporcją: ile którego
   źródła pracowało w tej samej chwili. Dlatego motywem przewodnim jest
   PASMO UDZIAŁU: poziomy pas złożony z prążków o różnej szerokości
   i barwie. Pas biegnie pod nagłówkiem strony, pod tytułem, po krawędzi
   kart i nad stopką. Nie podaje żadnej liczby — jest wyłącznie rytmem.
   Powierzchnie: grafit (system) i turkus (energia), z ciepłym miedzianym
   akcentem (to, co trzeba sprawdzić). Karty mają postać ODCZYTU: ciemne
   okienko licznika z porządkową cyfrą i tabliczka z treścią.

   ⚠ Kolejność ważna dla pułapek: reguły ogólne PRZED komponentami; każdy
   komponent stojący w prozie ma prefiks „.tresc", żeby wygrać
   specyficzność z „.tresc p a" (0-2-1).
   ===================================================================== */

/* --- 1. TOKENY ------------------------------------------------------- */
:root{
  /* powierzchnie jasne */
  --papier:            #F1F5F5;   /* chłodny arkusz — podłoże */
  --papier-karta:      #FFFFFF;   /* tabliczka odczytu */
  --tlo-2:             #DFEBEA;   /* pasmo drugoplanowe */
  --wiodaca-jasna:     #C8E3DF;   /* pola odsyłaczy, plakietki */

  /* pismo */
  --atrament:          #12211F;   /* grafit z zielonym podtonem */
  --atrament-cichy:    #42544F;

  /* barwa wiodąca i akcent */
  --wiodaca:           #0F7D75;   /* turkus — powierzchnie, prążki, kreski */
  --wiodaca-ciemna:    #0A554F;   /* nagłówki i odsyłacze na jasnym */
  --akcent:            #96461A;   /* miedź — wskazanie, fokus, hover */
  --linia:             #647773;   /* obwódki — element nietekstowy */
  --linia-cicha:       #C3D3D0;   /* wyłącznie dekoracja */
  --na-wiodacej:       #FFFFFF;
  --na-akcencie:       #FFFFFF;
  --duch:              #B4C9C5;   /* obrys ozdobnych cyfr sekcji */

  /* powierzchnie ciemne */
  --glebia:            #0E1B21;
  --glebia-2:          #08131A;
  --panel:             #122A31;
  --panel-2:           #16323A;
  --kapsula-ciemna:    #163940;
  --na-ciemnym:        #EAF3F2;
  --cichy-ciemny:      #B9CFCB;
  --turkus-jasny:      #6FD8CE;
  --bursztyn:          #F0B571;
  --linia-ciemna:      #7A9BA0;
  --linia-cicha-ciemna:#2C4550;

  /* prążki pasma udziału — wyłącznie ornament, żadnych wartości */
  --u1:#0F7D75; --u2:#17A192; --u3:#45C3B1; --u4:#8EE0D2;
  --u5:#96461A; --u6:#C8813E; --u7:#24444C; --u8:#0A554F;

  /* PASMO UDZIAŁU — nieregularne prążki, motyw przewodni całej makiety */
  --pasmo: linear-gradient(90deg,
      var(--u1)  0    13%,  var(--u2) 13%  23%,
      var(--u8) 23%  31%,  var(--u3) 31%  37%,
      var(--u7) 37%  55%,  var(--u4) 55%  60%,
      var(--u1) 60%  70%,  var(--u5) 70%  76%,
      var(--u6) 76%  81%,  var(--u2) 81%  90%,
      var(--u8) 90% 100%);
  /* ⚠ wariant nocny: „grafitowy" prążek musi być JAŚNIEJSZY od głębi, inaczej
     pas rwie się na oderwane kreski i wygląda jak błąd renderowania. */
  --u9:#43727A;
  --pasmo-ciemne: linear-gradient(90deg,
      var(--turkus-jasny)  0    11%, var(--u2)  11%  22%,
      var(--linia-ciemna) 22%  30%, var(--u3)  30%  36%,
      var(--u9) 36% 47%, var(--linia-ciemna) 47% 54%,
      var(--turkus-jasny) 54% 59%,
      var(--u2) 59% 69%, var(--bursztyn) 69% 76%,
      var(--u6) 76% 82%, var(--u3) 82% 91%,
      var(--u1) 91% 100%);

  /* pismo */
  --kroj-naglowek: "Space Grotesk", "Segoe UI", Roboto, "DejaVu Sans",
                   "Liberation Sans", Arial, sans-serif;
  --kroj-tekst:    "IBM Plex Sans", "Segoe UI", Roboto, "DejaVu Sans",
                   "Liberation Sans", Arial, sans-serif;

  /* ⚠⚠ MIARA W REM, NIE W EM — jedna krawędź dla nagłówków, prozy i kresek.
     34rem to około 68 znaków w wierszu; miara w em rozjeżdżała się między
     stopniami pisma (pułapka 9 katalogu). */
  --kolumna:        34rem;                     /* kolumna prozy — ok. 68 znaków */
  /* ⭐⭐ SKALA POWYŻEJ 1366 (decyzja użytkownika 2026-08-31). Pasmo było 78rem
     i przy 1920 px zostawiało po 152 px marginesu — makieta rosła wolniej niż
     ekran. 84rem daje po ok. 90 px. ⚠⚠ PUŁAPKA PODWÓJNEGO MARGINESU: pasmo ma
     WŁASNĄ szerokość i DODATKOWO wypełnienie wewnętrzne, więc samo podniesienie
     „--pas-szer" przesuwa tylko krawędź pudełka, a widoczne bloki treści stoją
     dalej. Dlatego razem z pasmem zjeżdża wypełnienie: 92 px -> 68 px. Karty
     zaczynają się 154 px od krawędzi zamiast 238 px.
     ⚠ Kolumna prozy NIE rośnie razem z pasmem — odzyskane 168 px dostają
     siatki (kroki, wyliczenie) i nagłówki sekcji, patrz blok 15c. */
  --pas-szer:       84rem;                     /* maksymalna szerokość pasma */
  --margines:       clamp(22px, 3.6vw, 68px);

  --promien:        4px;
  --promien-karta:  12px;
  --promien-duzy:   18px;
  --cien-karta:     0 18px 34px -22px rgba(14, 27, 33, .45),
                    0 2px 6px -3px rgba(14, 27, 33, .16);
  --cien-plyta:     0 30px 64px -30px rgba(14, 27, 33, .50),
                    0 3px 10px -5px rgba(14, 27, 33, .18);
  --zachodzenie:    clamp(1.6rem, 1rem + 2.4vw, 4.2rem);
}

/* --- 2. RESET I PODSTAWA --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html{
  /* ⭐⭐ zasada użytkownika: makieta MA ROSNĄĆ powyżej 1366 px (bramka B13) */
  font-size: clamp(1rem, 0.875rem + 0.35vw, 1.4rem);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* ⚠ pułapka 6: „clip" leczy przepełnienia od ornamentów full-bleed
   i NIE psuje position:sticky (hidden by psuł). */
html, body { overflow-x: clip; }
@supports not (overflow: clip) { html, body { overflow-x: hidden; } }

body{
  margin: 0;
  background: var(--papier);
  color: var(--atrament);
  font-family: var(--kroj-tekst);
  font-size: 1rem;
  line-height: 1.7;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; height: auto; }
/* ⚠⚠ pułapka „globalne strong,b{color}" — pogrubiamy samą wagą pisma */
strong, b { color: inherit; font-weight: 600; }

:focus-visible{
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
  border-radius: var(--promien);
}

/* skip-link — niewidoczny, ale z PEŁNYM polem trafienia (B7 mierzy prostokąt) */
.omin{
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 190px; height: 48px;
  display: flex; align-items: center;
  padding: 0; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.omin:focus{
  position: fixed; z-index: 60;
  width: auto; height: auto; clip-path: none;
  padding: .9rem 1.5rem;
  background: var(--glebia); color: var(--na-ciemnym);
  font-weight: 600; letter-spacing: .04em; text-decoration: none;
  border-radius: 0 0 var(--promien) 0;
}

/* --- 3. RAMY --------------------------------------------------------- */
/* .rama — pasek nagłówka i stopki (układ poziomy) */
.rama{
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
}

/* .kontener — KOLUMNA TREŚCI. Siatka z pustymi szynami po bokach: proza stoi
   w środkowym torze (symetrycznie — warunek 3 bramki B13), a bloki z klasą
   .szeroki rozpychają się na całe pasmo. */
.kontener{
  position: relative;
  width: 100%;
  max-width: min(100%, var(--pas-szer));
  margin-inline: auto;
  padding-inline: var(--margines);
  display: grid;
  grid-template-columns:
    [pelna-start] minmax(0, 1fr)
    [tekst-start] minmax(0, var(--kolumna))
    [tekst-end] minmax(0, 1fr) [pelna-end];
}
.kontener > * { grid-column: tekst-start / tekst-end; min-width: 0; }
.kontener > .szeroki,
.kontener > .lista-wpisow,
.kontener > .próbki { grid-column: pelna-start / pelna-end; }
/* hero: tytuł zaczyna się DOKŁADNIE tam, gdzie proza widoku, i rośnie w prawo */
.kontener--hero > * { grid-column: tekst-start / pelna-end; }

/* --- 4. NAGŁÓWEK ----------------------------------------------------- */
.naglowek{
  position: sticky; inset-block-start: 0; z-index: 30;
  background: var(--papier);
  border-block-end: 1px solid var(--linia-cicha);
  box-shadow: 0 12px 28px -26px rgba(14, 27, 33, .6);
}
/* pasmo udziału jako kreska pod paskiem nagłówka */
.naglowek::after{
  content: ""; display: block; height: 4px; background-image: var(--pasmo);
}
.naglowek__pas{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .3rem clamp(.8rem, 2.4vw, 2.6rem);
  padding-block: clamp(.5rem, 1vw, 1rem);
}

/* sygnatura słowna — typograficzna, z prążkowym znacznikiem.
   ⚠ T9: to NIE jest logotyp firmy; serwis nie ma właściciela ani marki. */
.znak{
  display: inline-flex; align-items: center; gap: .7em;
  min-height: 46px;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1rem, .9rem + .3vw, 1.32rem);
  line-height: 1.16; letter-spacing: -.01em;
  text-decoration: none; color: var(--atrament);
}
.znak__mark{
  flex: none; display: block;
  width: .5em; height: 1.75em;
  border-radius: 2px;
  background-image: linear-gradient(180deg,
     var(--u4) 0 16%, var(--u3) 16% 34%, var(--u1) 34% 62%,
     var(--u5) 62% 74%, var(--u7) 74% 100%);
}
.znak__tekst { position: relative; padding-block-end: .1em; }
/* ⚠ podkreślenie pokazujemy DOPIERO na hover: stała kreska pod pierwszym
   wyrazem długiej sygnatury czytała się jak przypadkowe podkreślenie. */
.znak__tekst::after{
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 0; height: 2px; background: var(--wiodaca);
  transition: width .25s ease;
}
.znak:hover .znak__tekst::after { width: 100%; }

/* ⚠ B5: nawigacja MA się kurczyć i zawijać. Menu jest zbudowane na zwykłej
   liście — bez <details>, więc pułapka T7 tu nie występuje. */
.menu{ flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
.menu__lista{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: .1rem clamp(.1rem, 1vw, .9rem);
  margin: 0; padding: 0; list-style: none;
}
.menu__link{
  position: relative;
  display: inline-flex; align-items: center; min-height: 46px;   /* B7 */
  padding-inline: .7em;
  font-size: .8rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  text-decoration: none; color: var(--atrament-cichy);
}
.menu__link::after{
  content: ""; position: absolute; inset-block-end: .5rem;
  inset-inline-start: .7em; width: 0; height: 3px; border-radius: 2px;
  background-image: var(--pasmo); background-size: 200% 100%;
  transition: width .25s ease;
}
.menu__link:hover{ color: var(--wiodaca-ciemna); }
.menu__link:hover::after{ width: calc(100% - 1.4em); }
.menu__link[aria-current="page"]{ color: var(--atrament); font-weight: 600; }
.menu__link[aria-current="page"]::after{ width: calc(100% - 1.4em); }
@media (max-width: 760px){
  .naglowek__pas{ justify-content: flex-start; }
  .menu, .menu__lista{ justify-content: flex-start; }
  .menu__link{ padding-inline: .45em; }
}

/* --- 5. HERO --------------------------------------------------------- */
.tresc{ display: block; }

.hero{
  position: relative; isolation: isolate; overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(88% 74% at 84% -6%, rgba(23, 161, 146, .55) 0%, rgba(23, 161, 146, 0) 62%),
    radial-gradient(62% 58% at 2% 104%, rgba(150, 70, 26, .34) 0%, rgba(150, 70, 26, 0) 66%),
    linear-gradient(163deg, #14484A 0%, #0F3037 46%, #0B161C 100%);
  color: var(--na-ciemnym);
  padding-block: clamp(2.8rem, 1.4rem + 5vw, 7rem) clamp(4rem, 2rem + 6vw, 9rem);
}
/* ORNAMENT: pole prążków w prawym górnym rogu — inline SVG, aria-hidden */
.hero__pole{
  position: absolute; z-index: 0;
  inset-block-start: -8%; inset-inline-end: -10%;
  width: clamp(300px, 46vw, 880px);
  color: var(--turkus-jasny);         /* B6: barwa ikony wobec tła hero */
  pointer-events: none;
}
.hero__pole svg{ display: block; width: 100%; height: auto; }
/* prążki gasną ku dołowi — pole ma być fakturą, nie tapetą */
.hero__pole{
  mask-image: linear-gradient(196deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 44%, rgba(0,0,0,0) 86%);
}
/* ORNAMENT: pasmo udziału na dolnej krawędzi hero */
.hero::after{
  content: ""; position: absolute; z-index: 2;
  inset-inline: 0; inset-block-end: 0;
  height: clamp(8px, 1vw, 14px);
  background-image: var(--pasmo-ciemne);
}
.hero .kontener{ position: relative; z-index: 1; }

.hero .tytul{
  margin: 0 0 clamp(1rem, .6rem + 1.1vw, 2rem);
  max-width: 17em;
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: clamp(2.2rem, 1.15rem + 3.4vw, 5.2rem);
  line-height: 1.02; letter-spacing: -.03em;
  color: var(--na-ciemnym);
  text-wrap: balance;
}
/* prążkowy znacznik nad tytułem — miniatura pasma udziału */
.hero .tytul::before{
  content: ""; display: block;
  width: clamp(120px, 17vw, 260px); height: 8px; border-radius: 2px;
  margin-block-end: clamp(1rem, .7rem + 1.1vw, 2.1rem);
  background-image: var(--pasmo-ciemne);
}
.hero .lid{
  /* ⚠⚠ 42rem dawało przy 1920 px wiersz 870 px (ok. 105 znaków) — po poszerzeniu
     pasma lid byłby jedynym miejscem, w którym proza rośnie ponad miarę.
     38rem = ok. 787 px przy 1920 px, czyli ok. 78 znaków. */
  margin: 0; max-width: 38rem;
  font-size: 1.22rem; line-height: 1.6;
  color: var(--na-ciemnym);
}
/* hero podstron i wpisów — niższy, ten sam język */
.hero--wpis{ padding-block: clamp(2.4rem, 1.2rem + 4vw, 5.6rem) clamp(3.4rem, 1.8rem + 5vw, 7.4rem); }
.hero--wpis .tytul{ font-size: clamp(2rem, 1.1rem + 2.9vw, 4.4rem); }

/* --- 6. PASMA I PŁYTY ------------------------------------------------ */
.pas{ position: relative; display: flow-root; }
.pas > .kontener{ position: relative; z-index: 1; }

.pas--wstep{
  background-color: var(--papier);
  padding-block: clamp(2.4rem, 1.2rem + 3.2vw, 5rem);
}
.pas--wstep .kontener > p:first-of-type{ font-size: 1.1rem; }

.pas--papier{ background-color: var(--papier); padding-block: clamp(2.2rem, 1.2rem + 3vw, 4.8rem); }
.pas--tlo{
  background-color: var(--tlo-2);
  padding-block: clamp(2.4rem, 1.2rem + 3.4vw, 5.4rem);
}
/* delikatna faktura prążków w tle pasma drugoplanowego */
.pas--tlo::before{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
     rgba(10, 85, 79, .07) 0 2px, rgba(10, 85, 79, 0) 2px 13px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,0) 70%);
}

/* pasmo, na którym leży PŁYTA nachodząca na sąsiada */
.pas--plyta{
  background-color: var(--papier);
  padding-block: 0 clamp(1.4rem, .8rem + 2vw, 3.2rem);
  padding-inline: clamp(8px, 1.8vw, 28px);
}
.plyta{
  position: relative; z-index: 2;
  margin-block-start: calc(-1 * var(--zachodzenie));
  padding-block: clamp(1.8rem, 1rem + 2.6vw, 3.8rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-plyta);
  overflow: hidden;
}
/* gzyms płyty — pasmo udziału na górnej krawędzi */
.plyta::before{
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 5px; background-image: var(--pasmo);
}

/* PASMO NOCNE i PŁYTA CIEMNA — nadpisujemy TOKENY, więc każdy komponent
   w środku dostaje wariant na ciemnym bez osobnych reguł (pułapka
   „globalny kolor na powierzchni o odwrotnej jasności"). */
.ciemno{
  --papier:         var(--glebia);
  --papier-karta:   var(--panel);
  --tlo-2:          var(--panel-2);
  --wiodaca-jasna:  var(--kapsula-ciemna);
  --atrament:       var(--na-ciemnym);
  --atrament-cichy: var(--cichy-ciemny);
  --wiodaca:        var(--turkus-jasny);
  --wiodaca-ciemna: var(--turkus-jasny);
  --akcent:         var(--bursztyn);
  --na-wiodacej:    var(--glebia);
  --na-akcencie:    var(--glebia);
  --linia:          var(--linia-ciemna);
  --linia-cicha:    var(--linia-cicha-ciemna);
  --duch:           #2F4C55;
  --cien-karta:     0 18px 34px -22px rgba(0, 0, 0, .7), 0 2px 6px -3px rgba(0, 0, 0, .5);
  --cien-plyta:     0 30px 64px -30px rgba(0, 0, 0, .8), 0 3px 10px -5px rgba(0, 0, 0, .5);
  color: var(--na-ciemnym);
}
.pas--noc{
  position: relative; overflow: hidden;
  background-color: var(--glebia);
  background-image:
    radial-gradient(60% 62% at 92% 2%, rgba(23, 161, 146, .30) 0%, rgba(23, 161, 146, 0) 64%),
    radial-gradient(48% 48% at 4% 100%, rgba(150, 70, 26, .22) 0%, rgba(150, 70, 26, 0) 68%);
  padding-block: clamp(2.6rem, 1.4rem + 3.6vw, 5.6rem);
}
.pas--noc::before{
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 5px; background-image: var(--pasmo-ciemne);
}
/* prążkowa faktura w tle pasma nocnego */
.pas--noc::after{
  content: ""; position: absolute; inset: 5px 0 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg,
     rgba(111, 216, 206, .09) 0 2px, rgba(111, 216, 206, 0) 2px 15px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,0) 60%);
}
.plyta--ciemna{
  background-color: var(--glebia);
  background-image:
    radial-gradient(70% 60% at 90% 0%, rgba(23, 161, 146, .28) 0%, rgba(23, 161, 146, 0) 62%);
  border-color: #21414A;
}
.plyta--ciemna::before{ background-image: var(--pasmo-ciemne); }

/* --- 7. TYPOGRAFIA --------------------------------------------------- */
.tresc{ counter-reset: sekcja; }

.tresc h2{
  position: relative;
  margin: clamp(2.2rem, 1.3rem + 2.2vw, 3.6rem) 0 .8rem;
  padding-block-start: clamp(.9rem, .6rem + .9vw, 1.6rem);
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.6rem);
  line-height: 1.14; letter-spacing: -.022em;
  color: var(--wiodaca-ciemna);
  text-wrap: balance;
}
/* prążkowa kreska nad każdym nagłówkiem sekcji */
.tresc h2::after{
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: clamp(64px, 8vw, 128px); height: 5px; border-radius: 2px;
  background-image: var(--pasmo);
}
.ciemno h2::after{ background-image: var(--pasmo-ciemne); }
.kontener > h2:first-child{ margin-block-start: 0; }

/* OZDOBNA CYFRA SEKCJI — rysowana obrysem w lewej szynie kolumny.
   ⚠ Wyłącznie ornament: numer porządkowy sekcji, nie informacja ze źródła. */
.tresc .kontener > h2{ counter-increment: sekcja; }
.tresc .kontener > h2::before{
  content: counter(sekcja, decimal-leading-zero);
  display: none;
  position: absolute; inset-block-start: .34em;
  inset-inline-end: calc(100% + clamp(1.4rem, 2vw, 2.8rem));
  font-family: var(--kroj-naglowek); font-weight: 700;
  /* szyna zewnętrzna ma po poszerzeniu pasma ok. 450 px — cyfra sekcji rośnie
     razem z nią, żeby nie została w niej sama biała plama. */
  font-size: clamp(2.4rem, 1rem + 4.2vw, 7rem);
  line-height: .8; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--duch);
  pointer-events: none;
}
@media (min-width: 1180px){
  .tresc .kontener > h2::before{ display: block; }
}

.tresc h3{
  margin: clamp(1.6rem, 1.1rem + 1.2vw, 2.4rem) 0 .5rem;
  padding-inline-start: .85em;
  position: relative;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: 1.22rem; line-height: 1.3; color: var(--atrament);
}
.tresc h3::before{
  content: ""; position: absolute; inset-inline-start: 0;
  inset-block: .18em .18em; width: 4px; border-radius: 2px;
  background: var(--wiodaca);
}

.tresc p{ margin: 0 0 1.05em; }
.tresc p:last-child{ margin-block-end: 0; }
.tresc .wprowadzenie{ font-size: 1.08rem; }

/* ⚠⚠ pułapka 1: „.tresc p a" (0-2-1) bije „.przycisk" (0-1-0) i tekst
   przycisku dostaje kolor odsyłacza. Wyłączamy komponenty wprost. */
.tresc p a:not(.przycisk):not(.wiecej),
.tresc li a:not(.przycisk):not(.wiecej){
  color: var(--wiodaca-ciemna);
  text-decoration-line: underline;
  text-decoration-color: var(--wiodaca);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  font-weight: 500;
}
.tresc p a:not(.przycisk):not(.wiecej):hover,
.tresc li a:not(.przycisk):not(.wiecej):hover{
  color: var(--akcent); text-decoration-thickness: 2px;
}

/* --- 8. PRZYCISK I ODSYŁACZ KIERUNKOWY ------------------------------- */
.tresc .cta{ margin-block: clamp(1.6rem, 1rem + 1.4vw, 2.6rem) 0; }
.tresc .przycisk{
  display: inline-flex; align-items: center; gap: .8em;
  min-height: 54px;
  padding: .7em 1.6em;
  background: var(--wiodaca-ciemna); color: var(--na-wiodacej);
  border-radius: var(--promien-karta);
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: 1rem; letter-spacing: .005em;
  text-decoration: none;
  box-shadow: var(--cien-karta);
  transition: background-color .2s ease, transform .2s ease;
  position: relative; overflow: hidden;
}
.tresc .przycisk::before{
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 6px; background-image: var(--pasmo); background-size: 100% 300%;
}
.tresc .przycisk span{ display: inline-block; padding-inline-start: .3em; }
.tresc .przycisk svg{ flex: none; width: 1.1em; height: 1.1em; }
.tresc .przycisk:hover{ background: var(--akcent); transform: translateY(-2px); }
.ciemno .przycisk{ background: var(--turkus-jasny); color: var(--glebia); }
.ciemno .przycisk:hover{ background: var(--bursztyn); color: var(--glebia); }

/* akapit, którego CAŁĄ treścią jest odsyłacz — B7 traktuje go jak cel UI */
.tresc .przejscie{ margin-block: 1.5em 1.7em; }
.tresc .przejscie a{
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 48px;
  padding: .45em 1.2em .45em 1em;
  background: var(--wiodaca-jasna);
  border: 1px solid var(--linia);
  border-radius: var(--promien-karta);
  color: var(--wiodaca-ciemna);
  font-weight: 600; text-decoration: none;
}
.tresc .przejscie a::before{
  content: ""; flex: none; width: 5px; height: 1.5em; border-radius: 2px;
  background-image: linear-gradient(180deg, var(--u3) 0 40%, var(--u1) 40% 72%, var(--u5) 72% 100%);
}
.tresc .przejscie a:hover{ background: var(--papier-karta); color: var(--akcent); }
.ciemno .przejscie a{ background: var(--kapsula-ciemna); color: var(--turkus-jasny); }
.ciemno .przejscie a:hover{ background: var(--panel-2); color: var(--bursztyn); }

/* --- 9. ODCZYTY (karty jak wskazanie licznika) ----------------------- */
.tresc .odczyty{
  counter-reset: odczyt;
  display: grid; gap: clamp(.9rem, .6rem + .8vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-block: clamp(1.4rem, 1rem + 1.2vw, 2.4rem) clamp(1.6rem, 1rem + 1.4vw, 2.8rem);
  align-items: stretch;
}
.tresc .odczyty--pary{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
/* ⚠ Grupy o parzystej liczbie tabliczek nie mogą wpaść w rząd „3 + 1” albo
   „4 + 2": osierocona karta w ostatnim rzędzie wygląda jak błąd składu. */
@media (min-width: 620px){
  .tresc .odczyty--cztery,
  .tresc .odczyty--szesc{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  .tresc .odczyty--szesc{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px){
  /* cztery tabliczki w rzędzie dopiero tam, gdzie wiersz w karcie ma sens —
     poniżej 1400 px zostają dwa rzędy po dwie */
  .tresc .odczyty--cztery{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tresc .odczyt{
  counter-increment: odczyt;
  position: relative; display: flex; flex-direction: column;
  padding: clamp(2.6rem, 2.2rem + 1vw, 3.4rem) clamp(1.1rem, .8rem + .9vw, 1.7rem)
           clamp(1.2rem, .9rem + .9vw, 1.8rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
  overflow: hidden;
}
/* okienko licznika z cyfrą porządkową — ornament, nie dane */
.tresc .odczyt::before{
  content: counter(odczyt, decimal-leading-zero);
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  min-width: 3.4em; height: 2.05em;
  display: flex; align-items: center; justify-content: center;
  padding-inline: .5em;
  background: var(--glebia); color: var(--turkus-jasny);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: .95rem; letter-spacing: .3em; text-indent: .3em;
  font-variant-numeric: lining-nums tabular-nums;
  border-end-end-radius: var(--promien-karta);
}
/* prążek pasma na górnej krawędzi tabliczki */
.tresc .odczyt::after{
  content: ""; position: absolute; inset-block-start: 0;
  inset-inline-start: 3.4em; inset-inline-end: 0; height: 5px;
  background-image: var(--pasmo);
}
.tresc .odczyt p{ margin: 0; }
.tresc .odczyt p + p{ margin-block-start: .8em; }
.ciemno .odczyt::before,
.tresc .odczyt.ciemno::before{ background: var(--turkus-jasny); color: var(--glebia); }
.ciemno .odczyt::after,
.tresc .odczyt.ciemno::after{ background-image: var(--pasmo-ciemne); }

/* wariant „tablica rozdzielcza" — ciemne tabliczki na jasnym paśmie */
.tresc .odczyty--tablica .odczyt{
  background: var(--glebia);
  border-color: #21414A;
  color: var(--na-ciemnym);
}
.tresc .odczyty--tablica .odczyt::before{ background: var(--turkus-jasny); color: var(--glebia); }
.tresc .odczyty--tablica .odczyt::after{ background-image: var(--pasmo-ciemne); }

/* --- 10. KROKI (ścieżka dokumentu) ----------------------------------- */
.tresc .kroki{
  counter-reset: krok;
  display: grid; gap: clamp(.7rem, .5rem + .6vw, 1.1rem);
  margin-block: clamp(1.4rem, 1rem + 1.2vw, 2.4rem) clamp(1.6rem, 1rem + 1.4vw, 2.8rem);
}
.tresc .krok{
  counter-increment: krok;
  position: relative;
  padding: clamp(1rem, .8rem + .6vw, 1.5rem) clamp(1.1rem, .8rem + .9vw, 1.8rem)
           clamp(1rem, .8rem + .6vw, 1.5rem) clamp(3.6rem, 3rem + 1.6vw, 5rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-inline-start: 4px solid var(--wiodaca);
  border-radius: var(--promien-karta);
  box-shadow: var(--cien-karta);
}
.tresc .krok::before{
  content: counter(krok, decimal-leading-zero);
  position: absolute; inset-block-start: clamp(1rem, .8rem + .6vw, 1.5rem);
  inset-inline-start: clamp(1rem, .7rem + .8vw, 1.6rem);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: 1.15rem; line-height: 1.1;
  color: var(--wiodaca-ciemna);
  font-variant-numeric: lining-nums tabular-nums;
}
/* kreska łącząca kroki w ścieżkę */
.tresc .krok + .krok::after{
  content: ""; position: absolute;
  inset-block-start: calc(-1 * clamp(.7rem, .5rem + .6vw, 1.1rem) - 1px);
  inset-inline-start: -4px;
  width: 4px; height: calc(clamp(.7rem, .5rem + .6vw, 1.1rem) + 2px);
  background: var(--wiodaca);
}
.tresc .krok p{ margin: 0; }
.ciemno .krok::before{ color: var(--turkus-jasny); }

/* --- 11. WYLICZENIE ROZSTRZYGAJĄCE ----------------------------------- */
.tresc .wyliczenie{
  display: grid; gap: .55rem;
  margin-block: 1.2em 1.7em;
}
.tresc .punkt{
  position: relative;
  padding: .85em 1.2em .85em 2.6em;
  background: var(--wiodaca-jasna);
  border-radius: var(--promien-karta);
  border: 1px solid var(--linia-cicha);
}
.tresc .punkt::before{
  content: ""; position: absolute; inset-inline-start: 1.1em; inset-block-start: 1.35em;
  width: 12px; height: 4px; border-radius: 2px; background: var(--wiodaca-ciemna);
}
.tresc .punkt p{ margin: 0; }
.ciemno .punkt::before{ background: var(--turkus-jasny); }

/* --- 12. WYRÓŻNIONY AKAPIT (wskazanie) ------------------------------- */
.tresc .wskazanie{
  position: relative;
  margin-block: 1.4em 1.8em;
  padding: clamp(1.1rem, .8rem + .9vw, 1.9rem) clamp(1.1rem, .8rem + .9vw, 1.9rem)
           clamp(1.1rem, .8rem + .9vw, 1.9rem) clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia);
  border-radius: var(--promien-karta);
  font-size: 1.06rem;
  box-shadow: var(--cien-karta);
  overflow: hidden;
}
.tresc .wskazanie::before{
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 7px;
  background-image: linear-gradient(180deg,
     var(--u4) 0 14%, var(--u3) 14% 30%, var(--u1) 30% 58%,
     var(--u5) 58% 72%, var(--u6) 72% 82%, var(--u7) 82% 100%);
}
.tresc .wskazanie p{ margin: 0; }
.tresc .wskazanie p + p{ margin-block-start: .8em; }

/* --- 13. LISTA WPISÓW ------------------------------------------------ */
.tresc .lista-wpisow{
  counter-reset: wpis;
  list-style: none; margin: clamp(1.6rem, 1rem + 1.6vw, 3rem) 0 0; padding: 0;
  display: grid; gap: clamp(1rem, .7rem + 1vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: stretch;
}
.tresc .zapowiedz{
  counter-increment: wpis;
  position: relative; display: flex; flex-direction: column;
  padding: clamp(2.8rem, 2.4rem + 1vw, 3.6rem) clamp(1.2rem, .9rem + 1vw, 2rem)
           clamp(1.3rem, 1rem + 1vw, 2rem);
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-duzy);
  box-shadow: var(--cien-karta);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tresc .zapowiedz::before{
  content: counter(wpis, decimal-leading-zero);
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  min-width: 3.6em; height: 2.1em;
  display: flex; align-items: center; justify-content: center;
  background: var(--glebia); color: var(--turkus-jasny);
  font-family: var(--kroj-naglowek); font-weight: 700;
  font-size: 1rem; letter-spacing: .3em; text-indent: .3em;
  border-end-end-radius: var(--promien-karta);
}
.tresc .zapowiedz::after{
  content: ""; position: absolute; inset-block-start: 0;
  inset-inline-start: 3.6em; inset-inline-end: 0; height: 5px;
  background-image: var(--pasmo);
}
.tresc .zapowiedz:hover{ transform: translateY(-3px); box-shadow: var(--cien-plyta); }
.tresc .zapowiedz__tytul{
  margin: 0 0 .6rem;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1.15rem, .95rem + .7vw, 1.6rem);
  line-height: 1.18; letter-spacing: -.015em;
}
.tresc .zapowiedz__tytul::after{ content: none; }
/* ⚠ B7: odsyłacz w nagłówku karty NIE jest odsyłaczem w prozie, więc bramka
   mierzy go jak cel UI — przy jednym wierszu tytułu miał 43 px. */
/* ⚠⚠ pułapka specyficzności: „.tresc li a:not(…)" (0-3-2) bije
   „.tresc .zapowiedz__tytul a" (0-2-2) i dokładało tytułowi karty turkusowe
   podkreślenie prozy. Klasa karty podnosi specyficzność do 0-3-2 + kolejność. */
.tresc .zapowiedz .zapowiedz__tytul a{
  display: block; min-height: 46px;
  color: var(--wiodaca-ciemna);
  text-decoration: none;
}
.tresc .zapowiedz .zapowiedz__tytul a:hover{
  color: var(--akcent);
  text-decoration: underline;
  text-decoration-color: var(--akcent);
  text-underline-offset: .18em;
}
.tresc .zapowiedz__tekst{ margin: 0 0 1.1rem; color: var(--atrament-cichy); }
.tresc .zapowiedz__wiecej{ margin: auto 0 0; }
.tresc .zapowiedz__wiecej .wiecej{
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 46px;
  color: var(--wiodaca-ciemna); font-weight: 600; text-decoration: none;
  letter-spacing: .02em;
}
.tresc .zapowiedz__wiecej .wiecej::before{
  content: ""; flex: none; width: 22px; height: 5px; border-radius: 2px;
  background-image: linear-gradient(90deg, var(--u1) 0 45%, var(--u5) 45% 70%, var(--u3) 70% 100%);
  transition: width .2s ease;
}
.tresc .zapowiedz__wiecej .wiecej:hover{ color: var(--akcent); }
.tresc .zapowiedz__wiecej .wiecej:hover::before{ width: 34px; }

/* --- 14. SPECIMEN — próbki barw i pokaz komponentów ------------------ */
.próbki{
  list-style: none; margin: 1.4rem 0 2rem; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}
.próbka{
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem .9rem;
  background: var(--papier-karta);
  border: 1px solid var(--linia-cicha);
  border-radius: var(--promien-karta);
}
.próbka__pole{
  flex: none; width: 3.4rem; height: 2.6rem; border-radius: var(--promien);
  border: 1px solid var(--linia);
}
.próbka__opis{ font-size: .92rem; line-height: 1.5; }
.demo{ margin-block: 1.4rem 2.2rem; }
.tresc .wzor{
  margin: 1.2em 0 1.6em;
  padding: clamp(1rem, .6rem + 1.2vw, 1.6rem);
  background: var(--glebia); color: var(--na-ciemnym);
  border-radius: var(--promien-karta);
  border-inline-start: 5px solid var(--turkus-jasny);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em; line-height: 1.8;
}
.pasmo-pokaz{
  height: 46px; border-radius: var(--promien-karta);
  background-image: var(--pasmo); margin-block: 1rem 1.6rem;
}
.pasmo-pokaz--ciemne{ background-image: var(--pasmo-ciemne); }

/* --- 15. STOPKA ------------------------------------------------------ */
.stopka{
  position: relative;
  /* ⚠ żadnego marginesu górnego: między ciemnym pasmem a ciemną stopką
     robił się jasny prześwit szerokości ekranu. */
  background-color: var(--glebia);
  background-image:
    radial-gradient(56% 70% at 88% 0%, rgba(23, 161, 146, .26) 0%, rgba(23, 161, 146, 0) 62%),
    radial-gradient(46% 60% at 6% 100%, rgba(150, 70, 26, .18) 0%, rgba(150, 70, 26, 0) 66%);
  color: var(--na-ciemnym);
}
.stopka::before{
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 6px; background-image: var(--pasmo-ciemne);
}
.stopka__pas{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .8rem clamp(1rem, 2vw, 2.4rem);
  padding-block: clamp(1.8rem, 1.2rem + 2vw, 3.2rem);
}
.stopka__znak{
  margin: 0;
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--kroj-naglowek); font-weight: 600;
  font-size: clamp(1rem, .9rem + .3vw, 1.25rem);
  line-height: 1.2; color: var(--na-ciemnym);
  max-width: 30em;
}
.stopka__znak::before{
  content: ""; flex: none; width: .5em; height: 1.7em; border-radius: 2px;
  background-image: linear-gradient(180deg,
     var(--turkus-jasny) 0 16%, var(--u3) 16% 34%, var(--u2) 34% 62%,
     var(--bursztyn) 62% 74%, var(--linia-ciemna) 74% 100%);
}
.stopka__menu ul{
  display: flex; flex-wrap: wrap; gap: .1rem clamp(.2rem, 1vw, 1rem);
  margin: 0; padding: 0; list-style: none;
}
/* ⚠ Stopnie i odstępy dobrane tak, żeby przy 1366 i 1920 sygnatura i nawigacja
   mieściły się w JEDNYM rzędzie — wcześniej nawigacja spadała pod sygnaturę
   i prawa połowa pasa stopki zostawała pusta. */
.stopka__menu a{
  display: inline-flex; align-items: center; min-height: 46px;
  padding-inline: .45em;
  color: var(--cichy-ciemny); text-decoration: none;
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
}
.stopka__menu a:hover{ color: var(--turkus-jasny); text-decoration: underline; }
.stopka__dol{
  display: flex; justify-content: flex-end;
  padding-block: .9rem clamp(1.2rem, .8rem + 1vw, 2.2rem);
  border-block-start: 1px solid var(--linia-cicha-ciemna);
}
.stopka__gora{ margin: 0; }
.do-gory{
  display: inline-flex; align-items: center; gap: .6em;
  min-height: 48px; padding: .4em 1.1em;
  border: 1px solid var(--linia-ciemna);
  border-radius: var(--promien-karta);
  color: var(--na-ciemnym); text-decoration: none;
  font-size: .9rem; font-weight: 500;
}
.do-gory svg{ width: 1.05em; height: 1.05em; flex: none; }
.do-gory:hover{ border-color: var(--turkus-jasny); color: var(--turkus-jasny); }

/* --- 15b. SZYNY ORNAMENTU (⚠ T19: kotwiczone do KONTENERA, nie do okna) --- */
@media (min-width: 1180px){
  .pas--wstep > .kontener::after,
  .pas--papier > .kontener::after,
  .plyta::after{
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    /* ⚠ Szyna mieści się W MARGINESIE kontenera. Szersza od niego wchodziła
       na bloki „.szeroki" (tabliczki biorą całe pasmo) i malowała się NA nich,
       bo pseudoelement stoi na końcu drzewa. */
    /* Szyna biegnie przez CAŁĄ wysokość pasma i gaśnie na obu końcach — krótki
       odcinek obok karty czytał się jak artefakt, a nie jak ozdobnik marginesu. */
    inset-block: 0; inset-inline-end: 6px;
    width: max(18px, calc(var(--margines) - 20px));
    background-image: repeating-linear-gradient(90deg,
        var(--linia-cicha) 0 3px, transparent 3px 14px);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 14%,
                                rgba(0,0,0,.85) 86%, rgba(0,0,0,0) 100%);
  }
}

/* --- 15c. SZEROKI UKŁAD POWYŻEJ 1180 px ------------------------------ */
/* ⭐⭐ Sedno poprawki skali: samo poszerzenie pasma zrobiłoby ten sam układ
   z mniejszymi białymi polami po bokach. Odzyskana szerokość dostaje tu ROLĘ:
     • nagłówek sekcji przestaje łamać się w kolumnie prozy i biegnie od kolumny
       tekstu do prawej krawędzi pasma (nagłówek to nie akapit — może być szerszy);
     • ŚCIEŻKA KROKÓW przestaje spadać w dół kolumny i biegnie W POPRZEK pasma;
     • WYLICZENIE ROZSTRZYGAJĄCE staje się rzędem tabliczek zamiast stosu.
   Kolumna prozy zostaje wąska (34rem) i wyśrodkowana — warunek 3 bramki B13
   („kompozycja nie jest jednostronna") oraz cel czytelności 65–85 znaków.
   ⚠ Poniżej 1180 px NIC się nie zmienia: kroki i wyliczenie zostają w kolumnie. */
@media (min-width: 1180px){

  /* nagłówek sekcji dostaje szerokość nagłówka, nie szerokość akapitu */
  .tresc .kontener > h2{ grid-column: tekst-start / pelna-end; }

  /* ŚCIEŻKA KROKÓW W POPRZEK PASMA */
  .kontener > .kroki{
    grid-column: pelna-start / pelna-end;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.9rem, .6rem + .8vw, 1.6rem);
  }
  /* ⚠ Pięć kroków nie może wpaść w rząd „3 + 2" dosunięty do lewej — osierocone
     karty w ostatnim rzędzie czytają się jak błąd składu. Sześć torów po pół
     karty daje 3 + 2 WYŚRODKOWANE (czwarta karta startuje od toru 2). */
  .kontener > .kroki--piec{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kontener > .kroki--piec > .krok{ grid-column: span 2; }
  .kontener > .kroki--piec > .krok:nth-child(4){ grid-column: 2 / span 2; }

  /* karta kroku w rzędzie: cyfra wraca na górę, wcięcie boczne znika */
  .tresc .krok{
    padding: clamp(2.6rem, 2.2rem + 1vw, 3.4rem) clamp(1.1rem, .8rem + .9vw, 1.7rem)
             clamp(1.2rem, .9rem + .9vw, 1.8rem);
  }
  .tresc .krok::before{
    inset-block-start: clamp(.9rem, .6rem + .8vw, 1.5rem);
    inset-inline-start: clamp(1.1rem, .8rem + .9vw, 1.7rem);
  }
  /* ⚠ kreska łącząca kroki jest PIONOWA — w rzędzie nie ma czego łączyć w dół */
  .tresc .krok + .krok::after{ content: none; }

  /* WYLICZENIE jako rząd tabliczek */
  .kontener > .wyliczenie{
    grid-column: pelna-start / pelna-end;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: clamp(.9rem, .6rem + .8vw, 1.6rem);
  }
}

/* --- 16. WĄSKIE EKRANY ----------------------------------------------- */
@media (max-width: 560px){
  .tresc .odczyt{ border-radius: var(--promien-karta); }
  .stopka__pas{ flex-direction: column; align-items: flex-start; }
}

/* --- 17. RUCH I DRUK ------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
@media print{
  .naglowek, .stopka__menu, .stopka__gora, .omin{ display: none; }
  body{ background: #fff; color: #000; }
  .hero, .pas--noc, .plyta--ciemna, .odczyty--tablica .odczyt{
    background: #fff !important; color: #000 !important;
  }
  .hero .tytul, .tresc h2{ color: #000; }
  .tresc .odczyt, .tresc .krok, .plyta{ box-shadow: none; border: 1px solid #999; }
}