/* updates_baukasten.css -- /updates/ and /updates/<slug>/ in the Baukasten site design.
   Reads only site_baukasten.css's tokens (--paper, --card, --ink, --soft, --line, --cobalt, --sage, --ochre,
   --f-d/--f-b/--f-m). Logical properties throughout. The Toy Box design has its own sheet. */

.bk-updates .ud{padding-block:clamp(2.5rem,6vw,5rem) clamp(4rem,8vw,6rem)}
/* Hyphenate on the element's own lang and break a word only when it cannot fit (see updates_toybox.css). */
.bk-updates .ud :is(h1,h2,h3,h4,.ud-benefit,.ud-row p,.ud-group li,.ud-pager span){
  overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:7 3 3}
/* site_baukasten.css balances every heading; Chrome does not hyphenate balanced text, so German headings wrap normally. */
.bk-updates .ud :is(h1,h2,h3,h4):lang(de){text-wrap:wrap}
.bk-updates .ud-article h1:lang(de){font-size:clamp(1.8rem,4.6vw,3.2rem)}
.bk-updates .ud-feature h2:lang(de){font-size:clamp(1.7rem,3.4vw,2.6rem)}

.ud-head{max-width:52rem;margin-block-end:clamp(2rem,5vw,3.5rem)}
.ud-head h1{font-size:clamp(2.5rem,5.8vw,4.6rem);letter-spacing:-.045em;line-height:.98}
.ud-lede{margin-top:1.2rem;font-size:1.1rem;line-height:1.6;color:#33322F;max-width:46ch}

.ud-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin:0 0 .9rem;font:500 .78rem var(--f-m);
  letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.ud-ver{background:var(--ink);color:var(--paper);padding:.1rem .55rem;border-radius:999px}
.ud-aud{display:inline-flex;flex-wrap:wrap;gap:.3rem}
.ud-chip{border:1.5px solid var(--ink);color:var(--ink);padding:.04rem .55rem;border-radius:999px;background:transparent}

/* New / Improved / Fixed: a word and a shape from the card alphabet, with a fill */
.ud-kind{display:inline-flex;align-items:center;gap:.5rem;margin:0;font:600 .74rem var(--f-m);letter-spacing:.12em;
  text-transform:uppercase;padding:.2rem .7rem;border-radius:999px}
.ud-kind::before{content:"";width:.6rem;height:.6rem;background:currentColor;flex:none}
.ud-kind--new{background:var(--cobalt);color:var(--cobalt-ink)}
.ud-kind--new::before{border-radius:50%}
.ud-kind--improved{background:color-mix(in srgb, var(--sage) 70%, var(--ink));color:var(--sage-ink)}
.ud-kind--improved::before{clip-path:polygon(50% 0,100% 100%,0 100%)}
.ud-kind--fixed{background:var(--ochre);color:var(--ochre-ink)}
.ud-kind--fixed::before{border-radius:999px 999px 2px 2px}

.ud-group{margin-block-start:1.2rem}
.ud-group ul{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem}
.ud-group li{position:relative;padding-inline-start:1.1rem;line-height:1.5;max-width:60ch}
.ud-group li::before{content:"";position:absolute;inset-inline-start:.1rem;top:.65em;width:.4rem;height:.4rem;background:var(--ink);border-radius:50%}

.ud-feature{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;background:var(--card);border-radius:28px;
  padding:clamp(1.4rem,4vw,3rem)}
@media (min-width:900px){
  .ud-feature{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .ud-feature--text{grid-template-columns:minmax(0,1fr)}
}
.ud-flag{margin:0 0 1rem;font:600 .78rem var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)}
.ud-feature h2{font-size:clamp(1.9rem,3.8vw,2.9rem);letter-spacing:-.035em;line-height:1.02;margin-block-end:.9rem}
.ud-feature h2 a,.ud-row h4 a{color:inherit;text-decoration:none}
.ud-feature h2 a:hover,.ud-row h4 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.ud-benefit{font-size:1.1rem;line-height:1.6;color:#33322F;max-width:46ch;margin-block-end:.6rem}
.ud-benefit--lead{font-size:clamp(1.15rem,2.2vw,1.4rem);margin-block-start:1.1rem}
.ud-actions{margin-block-start:1.6rem}

.ud-shot{margin:0;background:var(--paper-2);border-radius:22px;padding:clamp(.7rem,2vw,1.3rem)}
.ud-shot[hidden]{display:none}
.ud-shot__frame{border-radius:14px;overflow:hidden;background:var(--card);border:1.5px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink)}
.ud-shot img{display:block;width:100%;height:auto}

.ud-archive{margin-block-start:clamp(3rem,7vw,5rem)}
.ud-archive__title{font-size:clamp(1.6rem,2.8vw,2.1rem);margin-block-end:1.5rem}
.ud-month{display:grid;gap:.8rem 2.5rem;padding-block:1.4rem;border-block-start:1.5px solid var(--ink)}
@media (min-width:820px){.ud-month{grid-template-columns:11rem minmax(0,1fr)}}
.ud-month__name{font:600 .85rem var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.ud-list{list-style:none;margin:0;padding:0}
.ud-row{padding-block:1.1rem;border-block-start:1px solid var(--line)}
.ud-row:first-child{border-block-start:0;padding-block-start:0}
.ud-row h4{font-size:1.35rem;letter-spacing:-.02em;line-height:1.15;margin-block-end:.4rem}
.ud-row p:not(.ud-meta){color:#33322F;max-width:60ch}
.ud-counts{list-style:none;margin:.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}

.ud-empty{border:2px dashed var(--line);border-radius:28px;padding:clamp(2rem,6vw,4rem);text-align:center}
.ud-empty h2{font-size:1.6rem;margin-block-end:.5rem}
.ud-empty p{margin-inline:auto;color:var(--soft);max-width:40ch}

.ud--article .ud-article>*,.ud--article .ud-draft,.ud--article .ud-back,.ud--article .ud-pager{max-width:44rem;margin-inline:auto}
.ud--article .ud-article>.ud-shot--wide{max-width:62rem}
.ud-back{margin-block-end:1.6rem;font-weight:600}
.ud-back a{text-decoration:none;border-block-end:2px solid var(--ink)}
.ud-article h1{font-size:clamp(2.1rem,5vw,3.5rem);letter-spacing:-.04em;line-height:1}
.ud-article>.ud-shot{margin-block:2rem}
.ud-draft{margin-block-end:1.2rem;padding:.8rem 1rem;border:1.5px dashed var(--ink);border-radius:12px;background:var(--ochre);color:var(--ochre-ink)}
.ud-note{margin-block-start:1.2rem;padding:.65rem .9rem;border-radius:12px;background:var(--paper-2);color:var(--soft);font-size:.92rem}
.ud-story{margin-block-start:2rem;font-size:1.08rem;line-height:1.7}
.ud-story h2,.ud-story h3{line-height:1.15;margin:2rem 0 .6rem}
.ud-story p{margin-block-end:1rem}
.ud-story ul,.ud-story ol{padding-inline-start:1.3rem;margin-block-end:1rem}
.ud-story a{text-decoration:underline;text-underline-offset:.15em}
.ud-story img{max-width:100%;height:auto;border-radius:12px}
.ud-story code{background:var(--paper-2);padding:.05rem .35rem;border-radius:6px}
.ud-changes{margin-block-start:2.4rem;padding-block-start:1.6rem;border-block-start:1.5px solid var(--ink)}
.ud-changes h2{font-size:1.6rem}

.ud-pager{display:grid;gap:.8rem;margin-block-start:3rem}
@media (min-width:640px){.ud-pager{grid-template-columns:1fr 1fr}}
.ud-pager a{display:grid;gap:.2rem;padding:1rem 1.2rem;border:1.5px solid var(--ink);border-radius:16px;background:var(--card);
  text-decoration:none;font:700 1rem var(--f-d);min-width:0}
.ud-pager a>span{min-width:0}
.ud-pager a:hover{background:var(--ink);color:var(--paper)}
.ud-pager small{font:500 .74rem var(--f-m);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.ud-pager__next{text-align:end}
@media (min-width:640px){.ud-pager__prev:only-child{grid-column:1}.ud-pager__next:only-child{grid-column:2}}