/* BKH chrome — paleta, font, header/footer, ispravke clanka. */
/* BKH chrome — paleta, font, header/footer, ispravke clanka. Konsolidovano. */
/* varijable koje su ranije dolazile iz bkat.css (sada se ne ucitava) */ :root{--bk-measure:790px;--bk-radius:14px;--bk-radius-lg:20px;--bk-white:#FFFFFF;--bk-shadow:0 1px 2px rgba(28,28,33,.04), 0 8px 24px rgba(28,28,33,.06);--bk-shadow-lg:0 2px 4px rgba(28,28,33,.05), 0 18px 44px rgba(28,28,33,.10)}
@font-face{font-family:'Hanken Grotesk';src:url(/assets/fonts/hanken-var.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Archivo';src:url(/assets/fonts/archivo-var.woff2) format('woff2');font-weight:100 900;font-display:swap}
/* ============================================================ BKH CHROME — samo header i footer, za stranice clanaka. Ucitava se POSLIJE tbk-base.css i bkat.css. Namjerno NEMA globalnih pravila (nema *, body, h1-h4), da ne dira izgled samog clanka. Selektori su vezani klasama .bkh-hdr / .bkh-ftr, jer stranice clanaka vec imaju svoj <header class="tbk-article-header">. ============================================================ */ /* ---------- traka na vrhu ---------- */ .bkh-top{background:#242A30;color:#ECE8E0;font-family:'Hanken Grotesk',system-ui,sans-serif}
.bkh-top .bkh-wrap{display:flex;align-items:center;justify-content:center;gap:11px;height:38px;font-size:12.5px;font-weight:500;overflow:hidden;letter-spacing:-.006em}
.bkh-top .bkh-sep{opacity:.4}
.bkh-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* ---------- header + mobilni meni (kao myfrenchie) ---------- */ .bkh-hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #E6E6E9;font-family:'Hanken Grotesk',system-ui,sans-serif;letter-spacing:-.006em}
.bkh-hdr .bkh-bar{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.bkh-hdr .bkh-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#1C1C21}
.bkh-hdr .bkh-logo img{height:46px;width:auto;display:block}
.bkh-hdr .bkh-logo b{line-height:1.15;display:block}
.bkh-hdr .bkh-logo i{display:block;font-style:normal;text-transform:uppercase}
.bkh-hdr .bkh-nav{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.bkh-hdr .bkh-nav li{margin:0;padding:0;list-style:none}
.bkh-hdr .bkh-nav a{font-size:14.5px;font-weight:600;color:#1C1C21;white-space:nowrap;text-decoration:none;padding:5px 0;border-bottom:2px solid transparent;display:inline-block}
.bkh-hdr .bkh-nav a:hover{color:#363C42}
.bkh-hdr .bkh-nav a[aria-current="page"]{border-bottom-color:#363C42}
.bkh-scrim,.bkh-nav-head{display:none}
.bkh-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#1C1C21;cursor:pointer;padding:0 6px}
.bkh-mlabel{font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1}
/* ---------- footer ---------- */ .bkh-ftr{background:#000;color:#fff;padding:54px 0 30px;margin-top:0;font-family:'Hanken Grotesk',system-ui,sans-serif;letter-spacing:-.006em;line-height:1.55}
.bkh-ftr .bkh-fgrid{display:grid;gap:30px;grid-template-columns:1fr;margin-bottom:32px}
.bkh-ftr h3{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.7);margin:0 0 14px}
.bkh-ftr ul{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.bkh-ftr li{margin:0;padding:0;list-style:none}
.bkh-ftr a{font-size:13.5px;color:rgba(255,255,255,.85);text-decoration:none}
.bkh-ftr a:hover{color:#fff}
.bkh-ftr .bkh-fbrand img{height:64px;width:auto;margin-bottom:8px;display:block}
.bkh-ftr .bkh-fbrand p{color:rgba(255,255,255,.7);font-size:14px;line-height:1.65;max-width:34ch;margin:18px 0 0}
.bkh-ftr .bkh-fbrand p::before{content:"";display:block;width:54px;height:2px;background:#EFE7D9;opacity:.5;border-radius:2px;margin-bottom:18px}
.bkh-ftr .bkh-fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.42)}
/* ---------- font: isti par kao myfrenchie (Hanken Grotesk + Archivo) ---------- bkat.css koristi var(--bk-font) na vise mjesta, pa je dovoljno pregaziti varijablu. */ :root{--bk-font:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
body,.tbk-article-page,.tbk-lp,.tbk-article-content{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:-.006em}
.tbk-article-header h1{font-weight:900;letter-spacing:-.02em}
.tbk-article-content h2{font-weight:800;letter-spacing:-.012em}
.tbk-article-content h3{font-weight:800;letter-spacing:-.01em}
/* ============================================================ BREND BOJE — antracit + bez, na cijelom sajtu. Stari skin je imao dvije palete: narandzastu iz tbk-base (--tbk-orange #df6c4b, 27 upotreba) i bakarnu iz bkat (--bk-accent #C88A4A). Varijable u tbk-base NISU u :root nego u .tbk-*-page, pa se moraju pregaziti na istim selektorima. ============================================================ */ .tbk-article-page,.tbk-legal-page,.tbk-magazine-home,.tbk-lp{--tbk-black:#1C1C21;--tbk-body:#4C525A;--tbk-muted:#6B6B72;--tbk-line:#E6E6E9;--tbk-soft:#F5F5F6;--tbk-note:#F7F2E9;/* bila blijedo roza, sada bez */
  --tbk-orange:#363C42;/* akcent:antracit umjesto narandzaste */
  --tbk-blue:#242A30;--tbk-bg:#FFFFFF;--tbk-card:#FFFFFF;--tbk-shadow:0 14px 32px rgba(28,28,33,.07)}
:root{--bk-base:#363C42;--bk-base-dark:#242A30;--bk-dark:#1C1C21;--bk-body:#4C525A;--bk-muted:#6B6B72;--bk-bg:#F7F2E9;--bk-light:#EFE7D9;--bk-soft:#F7F7F8;--bk-accent:#363C42;/* bakarna -> antracit */
  --bk-accent-dark:#242A30;--bk-border:#E6E6E9;--bk-line:#EFE9DF}
/* ---------- kontrast: bijeli tekst na antracit podlozi ---------- tbk-base postavlja color:#fff na te naslove, ali bkat.css se ucitava poslije i pregazi ih u sivo (--bk-muted). Na antracitu to je neciljivo. Ovo vraca bijelu, ali samo tamo gdje je podloga tamna. */ .tbk-sidebar-widget h3, .tbk-sidebar-widget > strong, .tbk-sidebar-widget h2, .tbk-legal-sidebar-card h2, .tbk-feature-badge, .tbk-card-link:hover{color:#FFFFFF}
/* naslovi u bocnoj koloni koji NEMAJU tamnu podlogu ostaju prigušeni */ .tbk-sidebar-widget > p:first-child{color:#6B6B72}
/* ---------- bocna kolona: slicice su sada pravi <img> ---------- bkat.css je skracenim zapisom "background:" brisao background-image iz klasa tema. Sada slika ide kao <img>, pa toga vise nema. */ .tbk-sidebar-recent__image{width:62px;height:62px;border-radius:10px;overflow:hidden;background:#F3EFE8;flex:none}
.tbk-sidebar-recent__image img{width:100%;height:100%;object-fit:cover;display:block}
/* ---------- svjetlija bez pozadina ---------- */ :root{--bk-bg:#FBF9F5;--bk-light:#F4EFE6}
.tbk-article-page,.tbk-legal-page,.tbk-magazine-home,.tbk-lp{--tbk-note:#FBF9F5}
body{background:#FBF9F5}
/* ---------- FAQ: kao kod myfrenchie ---------- Stari stil nije imao nijedno pravilo za <summary>, pa je stajao podrazumijevani trougao preglednika. */ .tbk-article-section.tbk-faq h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:20px}
.tbk-faq-list{display:grid;gap:10px;margin-top:18px;max-width:760px}
.tbk-faq-item{background:#fff;border:1px solid #E6E6E9;border-radius:12px;padding:2px 16px;overflow:visible;transition:border-color .15s}
.tbk-faq-item:hover{border-color:#D5D5DA}
.tbk-faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:15px;font-weight:600;color:#1C1C21;padding:15px 0;cursor:pointer;list-style:none}
.tbk-faq-item summary::-webkit-details-marker{display:none}
.tbk-faq-item summary::marker{content:""}
.tbk-faq-item summary::after{content:"+";color:#6B6B72;font-size:20px;font-weight:400;line-height:1;flex:none}
.tbk-faq-item[open] summary::after{content:"–"}
.tbk-faq-answer{padding:0 0 15px;color:#6B6B72;font-size:14.5px;line-height:1.65}
.tbk-faq-answer p{margin:0 0 .7em}
.tbk-faq-answer p:last-child{margin-bottom:0}
.tbk-article-content .tbk-article-inline-figure img, .tbk-article-content figure:not(.tbk-article-hero) img, .tbk-article-content > img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid #E6E6E9}
.tbk-article-content .tbk-article-inline-figure figcaption, .tbk-article-content figure:not(.tbk-article-hero) figcaption{max-width:var(--bk-measure);font-size:13.5px;color:#6B6B72;line-height:1.55;margin-top:9px}
/* ============================================================ 1) APPLE SISTEMSKI FONT — tbk-base ga tvrdo postavlja na dva mjesta (.tbk-article-author-card + .tbk-lp .tbk-share-link span). ============================================================ */ .tbk-article-author-card,.tbk-author-panel,.tbk-author, .tbk-lp .tbk-share-link span,.tbk-share-link,.tbk-share-link span, .tbk-article-meta,.tbk-article-meta-item,.tbk-article-meta-item b{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif!important}
/* ============================================================ JEDNA KOLONA ZA SVE — tekst, slike, kartice, autor. Prije je svaki element imao svoju max-width (p i li na 68ch, figure bez ogranicenja, kartice na 68ch), pa su se razilazili. Sada sirinu drzi SAMO kolona, a sve unutra je 100%. ============================================================ */ .tbk-article-content{max-width:var(--bk-measure)}
.tbk-article-content p, .tbk-article-content li, .tbk-article-content h2, .tbk-article-content h3, .tbk-article-content ul, .tbk-article-content ol{max-width:none}
.tbk-article-content .tbk-article-inline-figure figcaption{max-width:100%}
/* ---------- JEDNA SIRINA KOLONE ZA CIJELI CLANAK ---------- var(--bk-measure) je u 'ch', a ch ovisi o velicini slova SAMOG elementa. Uvod je 18px, tijelo 17px, meta 15px -> isti broj ch daje tri razlicite sirine i elementi se razilaze. Zato jedna mjera u pikselima. */ .tbk-article-main{--bkh-col:790px}
.tbk-article-content > *{max-width:100%}
/* ============================================================ JEDAN STIL PASUSA ZA CIJELI CLANAK tbk-base ima tri pravila s razlicitim vrijednostima: .tbk-lp h2 + p 16px / 1.55 <- gadja PRVI pasus poslije naslova .tbk-lp p 16px / 1.58 .tbk-article-section p 16.6px / 1.68 Prvo ima vecu specificnost pa je prvi pasus svake sekcije bio sitniji i zbijeniji od ostalih. Ovdje se izjednacavaju. ============================================================ */ .tbk-lp .tbk-article-content p, .tbk-lp .tbk-article-section p, .tbk-lp .tbk-article-content h2 + p, .tbk-lp .tbk-article-section h2 + p, .tbk-article-content p, .tbk-article-section p{font-size:1.04rem;line-height:1.68;color:var(--tbk-body);margin:0 0 19px;max-width:none}
.tbk-lp .tbk-article-content li, .tbk-article-content li{font-size:1.04rem;line-height:1.68;max-width:none}
/* hero slika: ista kolona kao tekst */ .tbk-article-hero, .tbk-article-hero__image, .tbk-article-hero img{max-width:var(--bkh-col);width:100%}
.tbk-article-hero{margin-left:0;margin-right:0}
.tbk-article-hero figcaption{max-width:var(--bkh-col)}
/* ============================================================ MOBILNO: raspored iznad autora 1) Aktualisiert + Lesezeit zajedno u jednom redu 2) ikonice ISPOD njih, centrirane 3) kartica autora uza, ime u istoj liniji s natpisom ============================================================ */ /* ---------- zaglavlje: logo i hamburger kao na .at ---------- */ .bkh-hdr .bkh-logo img{height:58px}
.bkh-hdr .bkh-logo b{font-size:15px;letter-spacing:.02em;text-transform:uppercase;font-weight:800}
.bkh-hdr .bkh-logo i{font-size:14px;letter-spacing:.02em;color:#363C42;margin-top:1px;font-weight:800}
.bkh-burger{border:1px solid #E6E6E9;border-radius:12px;background:#fff;min-width:66px;height:56px}
.bkh-burger:hover{background:#FBF9F5;border-color:#D5D5DA}
.bkh-burger svg{width:34px;height:34px}
.bkh-mlabel{font-size:13px}
/* ---------- slike u tekstu: TACNO sirina teksta ---------- Nijedan stylesheet ne postavlja margin za <figure>, pa vrijedi podrazumijevani margin:1em 40px preglednika -> slika je bila uvucena 40px s obje strane i time uza od teksta. */ .tbk-article-content figure, .tbk-article-content .tbk-article-inline-figure{margin-left:0;margin-right:0;width:100%;max-width:100%}
.tbk-article-content figure img, .tbk-article-content .tbk-article-inline-figure img{width:100%;max-width:100%;height:auto;display:block}
.tbk-article-content figure figcaption{margin-left:0;margin-right:0;max-width:100%}
@media (max-width:1023px){.bkh-burger{display:flex}.bkh-hdr{backdrop-filter:none}.bkh-navwrap{position:fixed;inset:0;z-index:100;visibility:hidden;opacity:0;transition:opacity .25s}.bkh-toggle:checked ~ .bkh-navwrap{visibility:visible;opacity:1}.bkh-scrim{display:block;position:absolute;inset:0;background:rgba(20,23,26,.5)}.bkh-panel{position:absolute;top:0;left:0;bottom:0;width:min(86vw,340px);background:#fff;transform:translateX(-100%);transition:transform .28s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;overflow-y:auto}.bkh-toggle:checked ~ .bkh-navwrap .bkh-panel{transform:none}.bkh-nav-head{display:flex;align-items:center;justify-content:space-between;padding:15px 12px 14px 20px;border-bottom:1px solid #E6E6E9}.bkh-nav-head span{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#A6A6AD}.bkh-x{width:40px;height:40px;border:0;background:none;border-radius:11px;color:#1C1C21;display:grid;place-items:center;cursor:pointer;padding:0}.bkh-x svg{width:22px;height:22px}.bkh-x:hover{background:#F0F0F2}.bkh-hdr .bkh-nav{flex-direction:column;align-items:stretch;gap:0;padding:6px 0}.bkh-hdr .bkh-nav a{font-size:17px;padding:14px 20px;border-bottom:1px solid #F0F0F2;border-radius:0;white-space:normal;display:block}.bkh-hdr .bkh-nav a[aria-current="page"]{border-bottom-color:#F0F0F2;color:#363C42}.bkh-hdr .bkh-bar{height:78px}.bkh-hdr .bkh-logo img{height:56px}.bkh-hdr .bkh-logo b{font-size:14px}.bkh-hdr .bkh-logo i{font-size:13px}}
@media (max-width:767.98px){body{font-size:17px}.tbk-lp .tbk-article-content p, .tbk-lp .tbk-article-section p, .tbk-lp .tbk-article-content h2 + p, .tbk-lp .tbk-article-section h2 + p, .tbk-lp .tbk-article-content li, .tbk-article-content p,.tbk-article-section p,.tbk-article-content li{font-size:17px;line-height:1.72;color:var(--tbk-body)}.tbk-article-deck{font-size:17.5px;line-height:1.6}.tbk-article-header h1{font-size:30px;line-height:1.15}.tbk-lp .tbk-article-content h2,.tbk-article-content h2,.tbk-article-section h2{font-size:23px}.tbk-article-content h3{font-size:19px}.tbk-article-content table{font-size:15px}.tbk-faq-item summary{font-size:16px}.tbk-faq-answer{font-size:15.5px;line-height:1.7}}
@media (max-width:640px){.bkh-top .bkh-wrap{font-size:11px;gap:8px}.bkh-top .bkh-hidesm{display:none}}
@media (max-width:430px){.bkh-hdr .bkh-logo img{height:48px}.bkh-hdr .bkh-logo b{font-size:12.5px}.bkh-hdr .bkh-logo i{font-size:11.5px}.bkh-burger{min-width:58px;height:50px}.bkh-burger svg{width:30px;height:30px}.bkh-mlabel{font-size:11.5px}}
@media (min-width:720px){.bkh-ftr .bkh-fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* ---------- stranica clanka: bijela podloga, kartice se ocrtavaju ----------
   Bez ovoga su kartice bile bez na bez pozadini i stapale su se. */
body,.tbk-article-page,.tbk-lp{background:#FFFFFF}
.tbk-product-info-card{background:#FFFFFF;border:1px solid #E4E4E7;border-radius:12px;
 padding:15px 17px 16px}
.tbk-product-info-card b{display:block;margin:0 0 7px;font-size:11px;font-weight:800;
 letter-spacing:.075em;text-transform:uppercase;color:#1C1C21;line-height:1.35}
.tbk-product-info-card span{display:block;font-size:15px;line-height:1.55;color:#4C525A}
.tbk-product-info-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));
 margin:20px 0 0}
@media(max-width:620px){.tbk-product-info-grid{grid-template-columns:1fr;gap:12px}}
.tbk-product-brief__note{margin:20px 0 0;padding:15px 18px;background:#FBF6F2;
 border-left:4px solid #363C42;border-radius:0 10px 10px 0;font-size:15px;line-height:1.6;
 color:#4C525A}

/* manji radijus na pilulama i ikonicama za dijeljenje */
.tbk-article-meta-item{border-radius:6px}
.tbk-lp .tbk-article-share,.tbk-article-share{border-radius:6px}

/* mobilno: kartica autora samo s bitnim podacima — biografija se izostavlja */
@media(max-width:620px){
  .tbk-article-author-card{align-items:center;gap:11px}
  .tbk-article-avatar{width:42px;height:42px}
}

/* mobilno: ram s ikonicama za dijeljenje centriran */
@media(max-width:620px){
  .tbk-article-meta > .tbk-article-meta-row:last-child{justify-content:center}
  .tbk-article-share{margin-left:auto;margin-right:auto;justify-content:center}
}

/* desktop: ikonice u istom redu s datumom, iznad autora.
   Ikonice su u HTML-u u drugom redu zajedno s karticom autora,
   pa taj red rasklapamo s display:contents da oba udju u mrezu. */
@media(min-width:621px){
  .tbk-article-meta{display:grid;grid-template-columns:1fr auto;align-items:center;
   gap:14px 16px;grid-template-areas:"meta share" "author author"}
  .tbk-article-meta > .tbk-article-meta-row:first-child{grid-area:meta;display:flex;
   flex-wrap:wrap;gap:10px;justify-content:flex-start}
  .tbk-article-meta > .tbk-article-meta-row:last-child{display:contents}
  .tbk-article-author-card{grid-area:author}
  .tbk-article-share{grid-area:share;justify-self:end;margin:0}
}

/* ---------- JEDNA SIRINA ZA CIJELI CLANAK ----------
   Bilo je tri: 790px (meta/uvod/H1), 700px (hero), 68ch (~647px, tekst).
   68ch je promjenjiv jer ovisi o velicini slova elementa, pa se sve razilazilo. */
.tbk-article-breadcrumbs,
.tbk-article-header h1,
.tbk-article-deck,
.tbk-article-meta,
.tbk-article-content,
.tbk-article-hero,
.tbk-article-hero__image,
.tbk-article-hero img,
.tbk-article-hero figcaption{max-width:var(--bkh-col);width:100%}

/* ---------- tabela gewicht ---------- */
.tbk-tabwrap{overflow-x:auto;border:1px solid #E4E4E7;border-radius:12px;margin:22px 0 30px;
 background:#fff;-webkit-overflow-scrolling:touch}
table.tbk-gewicht{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
table.tbk-gewicht th,table.tbk-gewicht td{padding:12px 14px;text-align:left;vertical-align:top;
 border-bottom:1px solid #EFEFF1}
table.tbk-gewicht thead th{background:#F7F5F1;font-size:11px;font-weight:800;letter-spacing:.08em;
 text-transform:uppercase;color:#1C1C21;white-space:nowrap;border-bottom:1px solid #E4E4E7}
table.tbk-gewicht tbody th{font-weight:700;color:#1C1C21;white-space:nowrap;width:1%}
table.tbk-gewicht td{color:#4C525A;font-variant-numeric:tabular-nums}
table.tbk-gewicht td:nth-child(2),table.tbk-gewicht td:nth-child(3){font-weight:600;color:#1C1C21;
 white-space:nowrap}
table.tbk-gewicht .tbk-both{color:#1C1C21;font-weight:600}
table.tbk-gewicht tbody tr:last-child th,table.tbk-gewicht tbody tr:last-child td{border-bottom:0}
table.tbk-gewicht tbody tr:hover th,table.tbk-gewicht tbody tr:hover td{background:#FBFAF8}




/* mobilno: tabela se razlaze u kartice — bez vodoravnog klizanja */
@media(max-width:620px){
  .tbk-tabwrap{border:0;border-radius:0;background:none;overflow:visible}
  table.tbk-gewicht{min-width:0;display:block;font-size:15px}
  table.tbk-gewicht thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.tbk-gewicht tbody,table.tbk-gewicht tr{display:block}
  table.tbk-gewicht tr{background:#fff;border:1px solid #E4E4E7;border-radius:12px;
   padding:12px 14px 13px;margin:0 0 10px}
  
  table.tbk-gewicht tbody th{display:block;width:auto;padding:0 0 9px;border:0;
   font-size:16px;font-weight:800;color:#1C1C21}
  table.tbk-gewicht td{display:flex;gap:10px;align-items:baseline;padding:5px 0;border:0;
   white-space:normal}
  table.tbk-gewicht td::before{content:attr(data-label);flex:0 0 42%;font-size:11px;font-weight:800;
   letter-spacing:.06em;text-transform:uppercase;color:#8A8F96;line-height:1.5}
  table.tbk-gewicht td:nth-child(2),table.tbk-gewicht td:nth-child(3){white-space:normal}
  table.tbk-gewicht tbody tr:hover th,table.tbk-gewicht tbody tr:hover td{background:transparent}
}

/* tabela: cist zavrsetak — pozadina reda se sijece po zaobljenju okvira */
.tbk-tabwrap{overflow:hidden;overflow-x:auto}
table.tbk-gewicht{margin:0;border-radius:inherit}
table.tbk-gewicht tbody tr:nth-child(even) th,
table.tbk-gewicht tbody tr:nth-child(even) td{background:#FBFAF8}
table.tbk-gewicht tbody tr:hover th,
table.tbk-gewicht tbody tr:hover td{background:#F5F2EC}
@media(max-width:620px){
  table.tbk-gewicht tbody tr:nth-child(even) th,
  table.tbk-gewicht tbody tr:nth-child(even) td{background:transparent}
}

/* ---------- citirane izjave: koso i tanje, da se isticu ---------- */
.zitat{font-style:italic;font-weight:350;color:#3A4046;font-synthesis-style:auto}
.tbk-article-content .zitat,.tbk-lp .zitat{letter-spacing:.002em}

/* ---------- tudja etiketa: navodnici sitniji i tisi ----------
   Znakovi se crtaju kroz CSS pa im se moze zadati velicina i boja. */
.etikett .q{font-size:.85em;color:#8A8F96}
.etikett .q:first-child{vertical-align:.06em;margin-right:.02em}
.etikett .q:last-child{vertical-align:.3em;margin-left:.02em}

/* ---------- Ratgeber pregled ---------- */
.rgrp{margin:0 0 34px}
.rgrp h2{margin:0 0 6px}
.rsub{margin:0 0 14px;color:#6B6B72;font-size:15px}
.rlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.rlist li{margin:0}
.rlist a{display:block;border:1px solid #E4E4E7;border-radius:12px;background:#fff;
 padding:14px 16px;text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.rlist a:hover{border-color:#C9C9CF;box-shadow:0 16px 32px -26px rgba(28,28,33,.45);transform:translateY(-2px)}
.rlist .rt{display:block;font-size:16px;font-weight:700;color:#1C1C21;line-height:1.35;
 letter-spacing:-.01em}
.rlist .rd{display:block;margin-top:5px;font-size:14px;line-height:1.55;color:#6B6B72}
.rlist .rz{display:inline-block;margin-top:9px;font-size:10.5px;font-weight:800;letter-spacing:.08em;
 text-transform:uppercase;color:#8A8F96}
@media(min-width:760px){.rlist{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.rlist a:hover{transform:none}}
/* kartica je <a>, pa nasljedjuje debljinu linkova iz osnove — vracamo normalnu */
.rlist a,.rlist a:hover{text-decoration:none;font-weight:400;color:inherit;background:#fff}
.rlist .rt{font-weight:700}
.rlist .rd{font-weight:400}
/* podmeni: linkovi ne smiju nasljediti stil glavnih stavki (viša specifičnost) */

/* ---------- meni bez JavaScripta ----------
   Otvaranje ide preko skrivenog polja i CSS-a, pa meni radi i kad
   skripta ne prodje. Skripta sluzi samo za tastaturu i Escape. */
.bkh-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.bkh-burger{-webkit-user-select:none;user-select:none}
.bkh-burger:focus-visible,.bkh-x:focus-visible{outline:2px solid #363C42;outline-offset:2px}
@media(max-width:1023px){
  .bkh-toggle:checked ~ .bkh-navwrap{visibility:visible;opacity:1}
  .bkh-toggle:checked ~ .bkh-navwrap .bkh-panel{transform:none}
}

/* ============================================================
   MOBILNE POPRAVKE (provjereno mjerenjem u pregledniku, 320 i 390 px)
   Sve je u @media — desktop se NE dira.
   ============================================================ */
@media (max-width: 900px) {

  /* 1) Linkovi u podnozju: bili 18 px visoki bez razmaka -> promasaj prstom.
        Blok + unutrasnji razmak daje ~42 px po redu. */
  .bkh-ftr .bkh-fgrid ul { margin: 0; }
  .bkh-ftr .bkh-fgrid ul li { margin: 0; }
  .bkh-ftr .bkh-fgrid ul li a { display: block; padding: 11px 0; }

  /* 2) Ikonice za dijeljenje: bile 28 px i 6 px razmaka -> premale i preblizu. */
  .tbk-lp .tbk-share-link { width: 42px; height: 42px; font-size: .82rem; }
  .tbk-lp .tbk-share-link--email span { font-size: .9rem; }
  .tbk-article-share { gap: 8px; }
  .tbk-article-share > span { font-size: 12px; }

  /* 3) Mrvice (breadcrumbs): razmak povecava dodirnu povrsinu,
        a ne pomjera raspored jer su linkovi u redu teksta. */
  .tbk-article-breadcrumbs { line-height: 2.2; }
  .tbk-article-breadcrumbs a { display: inline-block; padding: 10px 0; }

  /* 4) Pravni linkovi u bocnoj kartici bili su 26 px i 1 px jedan od drugog. */
  .tbk-legal-sidebar-card ul li { margin: 0; }
  .tbk-legal-sidebar-card ul li > button.tbk-prg-link,
  .tbk-legal-sidebar-card ul li > a,
  .tbk-legal-sidebar-card ul li > span { display: block; padding: 10px 0; text-align: left; }

  /* 5) Ime autora kao link — bilo 22 px. */
  .tbk-author-name-link { display: inline-block; padding: 9px 0; }

  /* 6) Sitan tekst: sve ispod 12 px je na telefonu tesko citljivo. */
  .bkh-top .bkh-wrap span { font-size: 12px; }
  .bkh-hdr .bkh-logo i { font-size: 12px; }
  .bkh-burger .bkh-mlabel { font-size: 12px; }
  .tbk-sidebar-widget h3 { font-size: 12.5px; }
  .tbk-article-meta-item b { font-size: 12px; }
  .tbk-product-info-card b { font-size: 12px; }
  .tbk-article-content th { font-size: 12px; }
  .cat .lbl b .subn { font-size: 12px; }
  .ccat-tag, .cbadge, .ceyebrow { font-size: 12px; }
}

/* 7) Naslovi plocica na uskim telefonima (320 px) bili su odsjeceni:
      flex stavka se nije smjela suziti, a .cat ima overflow:hidden. */
/* Plocice kategorija na uskim telefonima.
   Duge njemacke slozenice (Katzenspielzeug, Wohnungshaltung) su u dvije
   kolone bile odsjecene. Tekst se NE dira zbog kljucnih rijeci u linku.
   Do 360 px ide jedna kolona pa naziv stane u jedan red; iznad toga
   dvije kolone s malo vise prostora. */
@media (max-width: 400px) {
  .cat .lbl { gap: 6px; padding: 14px 13px; }
  .cat .lbl b { min-width: 0; line-height: 1.25;
                hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 360px) {
  .cats { grid-template-columns: 1fr; }
}

/* 8) Tackice klizaca na naslovnoj: 8x8 px je premalo za prst.
      Providni okvir povecava dodirnu povrsinu, a tackica ostaje ista
      (background-clip: padding-box drzi boju unutar starih 8 px). */
@media (max-width: 900px) {
  .gdots .gdot { box-sizing: content-box; border: 14px solid transparent;
                 background-clip: padding-box; }
  .gdotnav .gplay { width: 44px; height: 44px; }
}

/* ---- mobilne popravke, drugi krug (pravne stranice, tabela, autor) ---- */
@media (max-width: 900px) {
  /* pravne stranice koriste tbk-legal-* klase, ne tbk-article-* */
  .tbk-legal-breadcrumbs { line-height: 2.2; }
  .tbk-legal-breadcrumbs a { display: inline-block; padding: 10px 0; }

  /* linkovi i PRG-dugmad usred recenice: display:inline znaci da razmak
     povecava dodirnu povrsinu, a ne razmice redove teksta */
  .tbk-legal-card p .tbk-prg-link,
  .tbk-legal-card p a,
  .tbk-legal-contact-box a { display: inline; padding: 11px 0; }

  /* bocna kartica: redovi na ugodnih 44 px */
  .tbk-legal-sidebar-card ul li > button.tbk-prg-link,
  .tbk-legal-sidebar-card ul li > a,
  .tbk-legal-sidebar-card ul li > span { padding: 12px 0; }

  /* ime autora */
  .tbk-author-name-link { padding: 11px 0; }
}

/* ============================================================
   TABELA TEZINE NA TELEFONU: kartice umjesto bocnog klizanja.
   Tabela je imala min-width:560px u kontejneru s overflow-x:auto,
   pa se na telefonu morala vuci u stranu. Svaki <td> vec nosi
   data-label, pa se naziv kolone ispisuje uz vrijednost.
   ============================================================ */
@media (max-width: 900px) {
  .tbk-tabwrap { overflow-x: visible; border: 0; border-radius: 0; }
  table.tbk-gewicht { display: block; min-width: 0; width: 100%; }
  table.tbk-gewicht thead {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  table.tbk-gewicht tbody { display: block; }
  table.tbk-gewicht tbody tr {
    display: block; margin: 0 0 12px; padding: 13px 15px 6px;
    border: 1px solid #E4E4E7; border-radius: 12px; background: #fff;
  }
  table.tbk-gewicht tbody tr:last-child { margin-bottom: 0; }
  table.tbk-gewicht tbody tr th {
    display: block; width: auto; padding: 0 0 9px;
    border: 0; white-space: normal; font-size: 16px; font-weight: 800; color: #1C1C21;
  }
  /* blok, ne flex: u celiji ima linkova, a flex bi svaki inline element
     razbio u zasebnu stavku pa bi tacka na kraju recenice odletjela udesno */
  table.tbk-gewicht tbody td {
    display: block; padding: 9px 0; border: 0; border-top: 1px solid #F1F0ED;
    text-align: left;
  }
  table.tbk-gewicht tbody td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    color: #6B6B72; font-size: 12px; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; line-height: 1.5;
  }
  table.tbk-gewicht tbody tr:hover th,
  table.tbk-gewicht tbody tr:hover td { background: transparent; }
}

/* ---- mobilne popravke, treci krug ---- */
@media (max-width: 900px) {
  /* dugme se ponasa kao polje forme pa se skuplja na sirinu teksta */
  .tbk-legal-sidebar-card ul li > button.tbk-prg-link { width: 100%; text-align: left; }
  /* redovi u pravnoj bocnoj listi: tanka linija umjesto dodira ivica */
  .tbk-legal-sidebar-card ul li + li { border-top: 1px solid #EFEFF1; }
}

/* Zaglavlje na telefonu mora biti neprozirno.
   Na desktopu je mutno staklo (backdrop-filter), ali na <=1023 px je
   filter iskljucen, a pozadina je ostala rgba(...,.9) — tekst clanka
   se vidio kroz zaglavlje i sudarao s logom. */
@media (max-width: 1023px) {
  .bkh-hdr { background: #FFFFFF; }
}

/* donja traka: linkovi u istoj boji kao copyright, bez isticanja */
.bkh-ftr .bkh-fbot a{color:inherit;text-decoration:none}
.bkh-ftr .bkh-fbot a:hover{color:#fff}

/* PRG: Rechtslinks als Buttons — Optik identisch zum bisherigen Textlink. Angelegt 2026-08-11. */
.tbk-prg-hidden-form{display:none!important}
.tbk-prg-link{appearance:none;-webkit-appearance:none;background:none;border:0;padding:0;margin:0;
 font:inherit;line-height:inherit;color:inherit;text-align:inherit;text-decoration:none;cursor:pointer}
.bkh-ftr .bkh-fbot .tbk-prg-link:hover{color:#fff}

/* 404-Seite: einspaltig, gleiche Textbreite wie die Rechtsseiten. Angelegt 2026-08-11. */
.bkh-404{max-width:760px;margin:0 auto}
.bkh-404 .rlist{margin-top:26px}
.bkh-404{padding-bottom:64px}
@media(max-width:759px){.bkh-404{padding-bottom:40px}}

/* Kompakte Zwei-Spalten-Tabelle (Codes, kurze Werte): bleibt auch am Telefon eine Tabelle,
   weil zwei schmale Spalten dort problemlos passen. Kein Querscrollen. 12.08.2026 */
table.tbk-gewicht.tbk-kompakt{min-width:0}
@media(max-width:759px){
  table.tbk-gewicht.tbk-kompakt{display:table;width:100%;font-size:15px}
  table.tbk-gewicht.tbk-kompakt thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  table.tbk-gewicht.tbk-kompakt tbody,table.tbk-gewicht.tbk-kompakt tr{display:table-row-group}
  table.tbk-gewicht.tbk-kompakt tr{display:table-row;background:none;border:0;border-radius:0;padding:0}
  table.tbk-gewicht.tbk-kompakt thead th{display:table-cell;padding:10px 10px;border-bottom:1px solid #E4E4E7}
  table.tbk-gewicht.tbk-kompakt tbody th{display:table-cell;width:1%;white-space:nowrap;
   padding:10px 14px 10px 10px;border-bottom:1px solid #EFEFF1;font-weight:700}
  table.tbk-gewicht.tbk-kompakt td{display:table-cell;padding:10px 0;border-bottom:1px solid #EFEFF1}
  table.tbk-gewicht.tbk-kompakt td::before{content:none}
}

/* ---------- bkh-hub: unakrsni linkovi izmedju svih clanaka ----------
   Mobilna prva: 2 kolone od 0px, 3 od 720px, 6 od 1000px.
   Bez oslonca na JavaScript. Linkovi nisu vizuelno istaknuti. */
.bkh-hub{background:#F7F5F2;border-top:1px solid #E7E2DB;padding:34px 0 30px;font-family:'Hanken Grotesk',system-ui,sans-serif;color:#2B3138}
.bkh-hub .bkh-hub-kicker{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#7C848D;margin:0 0 18px}
.bkh-hub-grid{display:grid;gap:24px 20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.bkh-hub .bkh-hub-h{font-size:12.5px;font-weight:700;color:#2B3138;margin:0 0 9px}
.bkh-hub ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bkh-hub li{margin:0;padding:0;list-style:none}
.bkh-hub a{display:block;font-size:13.5px;line-height:1.45;color:#4A525C;text-decoration:none;padding:9px 0;min-height:44px}
.bkh-hub a:hover{color:#2B3138}
@media (min-width:720px){.bkh-hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.bkh-hub-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.bkh-hub ul{gap:6px}.bkh-hub a{padding:3px 0;min-height:0}}

/* pravni linkovi u dnu: dodirna povrsina 44 px na telefonu (WCAG),
   izgled na desktopu se ne mijenja */
@media (max-width:900px){
.bkh-ftr .bkh-fbot{align-items:center;gap:4px 12px}
.bkh-ftr .bkh-fbot a,.bkh-ftr .bkh-fbot .tbk-prg-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 3px}
}

/* bkh-hub unter 1000px: jede Kategorie nimmt die volle Breite und listet ihre
   Links selbst mehrspaltig. Vorher standen die Kategorien nebeneinander und die
   kuerzeren Spalten hinterliessen grosse Loecher. 12.08.2026 */
@media (max-width:999px){
  .bkh-hub-grid{grid-template-columns:1fr;gap:18px}
  .bkh-hub-col{display:block}
  .bkh-hub-col ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px}
  .bkh-hub .bkh-hub-h{margin:0 0 4px;padding-top:6px;border-top:1px solid #E7E2DB}
  .bkh-hub a{padding:7px 0;min-height:40px;display:flex;align-items:center}
}
@media (min-width:720px) and (max-width:999px){
  .bkh-hub-col ul{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Tabellen: waermere Optik ----------
   Kopf in Kupfer wie die Augen der Rasse (#C88A4A aus der Seitenpalette),
   ruhige Zeilen, kurze Werte mittig. Karten-Ansicht am Telefon bleibt wie sie war. */
.tbk-tabwrap{border-color:#E7E2DB;box-shadow:0 1px 2px rgba(28,28,33,.05),0 10px 26px rgba(28,28,33,.05)}
table.tbk-gewicht thead th{background:#F7F0E6;color:#7A5426;border-bottom:1px solid #E8DAC6;
 letter-spacing:.09em}
table.tbk-gewicht thead tr{box-shadow:inset 0 3px 0 #C88A4A}
table.tbk-gewicht tbody th{color:#2B3138}
table.tbk-gewicht tbody tr:nth-child(even) th,
table.tbk-gewicht tbody tr:nth-child(even) td{background:#FBF8F3}
table.tbk-gewicht tbody tr:hover th,
table.tbk-gewicht tbody tr:hover td{background:#F6EFE5}

@media(min-width:621px){
  /* Auf breiten Seiten nicht ueber die Leseweite ziehen, sondern mittig setzen */
  .tbk-tabwrap{max-width:880px;margin-left:auto;margin-right:auto}
  /* Bezeichnungsspalte darf umbrechen und nimmt hoechstens ein Drittel */
  /* Breite nicht starr vorgeben: der Browser verteilt nach Inhalt, die
     Bezeichnungsspalte bekommt nur eine Obergrenze gegen Ausufern. */
  table.tbk-gewicht tbody th{white-space:normal;width:auto;max-width:34ch;
   padding-right:20px;line-height:1.4}
  table.tbk-gewicht thead th:first-child{width:auto}
  /* kurze Werte mittig, Fliesstext bleibt links */
  table.tbk-gewicht td.tbk-c,table.tbk-gewicht thead th.tbk-c{text-align:center}
  table.tbk-gewicht td.tbk-c{white-space:nowrap}
  /* erste Spalte bekommt eine feine Kupferkante */
  table.tbk-gewicht tbody th{box-shadow:inset 3px 0 0 rgba(200,138,74,.28)}
}

/* Karten-Ansicht: keine Zebrastreifen, die Karte hat ihre eigene Flaeche.
   Muss NACH den Farbregeln oben stehen, sonst gewinnt der Zebrastreifen. */
@media(max-width:620px){
  table.tbk-gewicht tbody tr:nth-child(even) th,
  table.tbk-gewicht tbody tr:nth-child(even) td,
  table.tbk-gewicht tbody tr:hover th,
  table.tbk-gewicht tbody tr:hover td{background:transparent}
  table.tbk-gewicht tbody th{box-shadow:none}
  /* Karte bekommt stattdessen eine feine Kupferkante links */
  table.tbk-gewicht tbody tr{box-shadow:inset 3px 0 0 rgba(200,138,74,.30)}
  table.tbk-gewicht td.tbk-c{text-align:left;white-space:normal}
}

/* napomene u podnozju: reklama i KI — citljivo, ali tise od glavnog teksta */
.bkh-ftr .bkh-fbrand .bkh-fnote{margin:14px 0 0;max-width:44ch;color:rgba(255,255,255,.6);font-size:12.5px;line-height:1.6}
.bkh-ftr .bkh-fbrand .bkh-fnote::before{display:none}
.bkh-ftr .bkh-fbrand .bkh-fnote strong{color:rgba(255,255,255,.82);font-weight:700}
@media (min-width:720px){.bkh-ftr .bkh-fbrand .bkh-fnote{max-width:38ch}}

/* Menue-Schalter: nativ bedienbar statt label mit role=button ----------
   Das Kaestchen bleibt unsichtbar, ist aber mit der Tastatur erreichbar und
   wird als Bedienelement vorgelesen. Die Labels brauchen dadurch weder
   role="button" noch tabindex — beides war fuer <label> ohnehin unzulaessig.
   12.08.2026 */
.bkh-toggle:focus-visible ~ .bkh-burger{outline:2px solid #C88A4A;outline-offset:3px;
 border-radius:12px;background:#FBF9F5}
.bkh-toggle:focus-visible ~ .bkh-navwrap .bkh-x{outline:2px solid #C88A4A;outline-offset:2px}
/* Auf dem Desktop gibt es keinen Burger — dann auch keinen leeren Tabstopp. */
@media(min-width:1024px){.bkh-toggle{display:none}}

/* tekst samo za citace ekrana (zamjena za aria-label na <label>) */
.bkh-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Kontrast nach WCAG AA (Lighthouse-Befund 12.08.2026) ----------
   Drei Stellen lagen unter 4.5:1. Farbwerte nur so weit nachgedunkelt,
   dass der Ton erhalten bleibt. */
.tbk-product-eyebrow{background:#C24A27}          /* Weiss darauf: 4.9 statt 3.3 */
.tbk-product-eyebrow::after{border-top-color:#8E3D22}
.bkh-hub .bkh-hub-kicker{color:#69707A}           /* auf #F7F5F2: 4.6 statt 3.5 */
.bkh-ftr .bkh-fbot{color:rgba(255,255,255,.62)}   /* auf Schwarz: 6.4 statt 3.9 */