/* ---------- Language switch in the menu + the "also in your language" note (15.10.2026) ---------- */
.lang-switch{position:relative}
.lang-switch summary{list-style:none;cursor:pointer;height:40px;min-width:40px;padding:0 12px;border-radius:20px;display:grid;place-items:center;font-size:13px;font-weight:600;letter-spacing:.04em;box-shadow:inset 0 0 0 1px #20242826;transition:background .2s,box-shadow .2s}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch summary:hover,.lang-switch[open] summary{background:var(--ink);color:#fff;box-shadow:none}
.lang-switch ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--cream);border-radius:16px;box-shadow:0 0 0 1px #2024281c,0 12px 32px #2024281f;min-width:150px;z-index:40}
.lang-switch a{display:block;padding:9px 14px;border-radius:10px;font-size:14px}
.lang-switch a:hover{background:#2024280d}
.lang-switch a[aria-current]{font-weight:600}
.lang-switch a[aria-current]:after{content:" ✓";color:#7254c4}

.lang-note{position:fixed;left:16px;bottom:16px;z-index:45;display:flex;align-items:center;gap:12px;max-width:min(420px,calc(100vw - 32px));padding:12px 12px 12px 18px;background:var(--cream);border-radius:18px;box-shadow:0 0 0 1px #2024281c,0 12px 32px #2024282a;font-size:14px;animation:langIn .5s cubic-bezier(.2,.7,.2,1) both}
.lang-note p{margin:0;line-height:1.4}
.lang-note a{font-weight:600;white-space:nowrap;background:var(--ink);color:#fff;border-radius:20px;padding:8px 14px}
.lang-note button{border:0;background:none;width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;flex:none}
.lang-note button:hover{background:#2024280d}
@keyframes langIn{from{opacity:0;translate:0 12px}to{opacity:1;translate:none}}
@media(prefers-reduced-motion:reduce){.lang-note{animation:none}}
@media print{.lang-switch,.lang-note{display:none!important}}
/* phones and tablets: the logo sits in the middle of the top row, so the language switch goes to the left edge,
   balancing the YouTube button on the right (otherwise the two buttons push the logo off centre) */
@media(max-width:900px){
  .site-nav .nav-right{display:contents}
  .lang-switch{grid-column:1;grid-row:1;justify-self:start}
  .site-nav .nav-sub{grid-column:3;grid-row:1;justify-self:end}
  .lang-switch ul{right:auto;left:0}
}
/* in-between widths with longer menu names (es, pt; later fr, de): the links get a little smaller and closer so the
   logo stays in the middle of the bar */
@media(min-width:901px) and (max-width:1100px){
  html:not([lang="en"]) .site-nav nav{gap:clamp(12px,1.4vw,20px)}
  html:not([lang="en"]) .site-nav nav a{font-size:14px}
}

/* ---------- Long words on small phones (15.10.2026) ----------
   German (and some Portuguese and French) headings have words longer than a 360px screen at headline size
   ("Überraschungstüten."): they break and hyphenate instead of pushing the page sideways. Hyphenation only for
   German, where it is expected; other languages just break the word if they really must. */
h1,h2,h3{overflow-wrap:break-word}
@media(max-width:600px){:lang(de) :is(h1,h2,h3){hyphens:auto;-webkit-hyphens:auto}}
.pp-copy,.pp-gallery{min-width:0}
/* decorations that lean out of the page edge (the skeleton postcards next to "Made in this tutorial") are cut off
   at the edge of the screen instead of making it scroll sideways; clip keeps sticky elements working */
main{overflow-x:clip}

/* "Skip to content": hidden until a keyboard user tabs to it, then it shows over the menu */
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:20px;font-size:14px;font-weight:600;transition:top .2s}
.skip-link:focus{top:16px}

/* ---------- Privacy and site information page + its footer link (15.10.2026) ---------- */
.legal{width:min(760px,90%);margin:0 auto;padding:40px 0 100px}
.legal h1{margin-bottom:22px}
.legal .intro{font-size:19px;margin:0 0 56px}
.legal section{padding:28px 0;border-top:1px solid #2024281f}
.legal h2{font-size:22px;letter-spacing:-.02em;margin:0 0 12px}
.legal p{margin:0 0 12px;font-size:16px;line-height:1.65;color:#2f3337}
.legal-updated{margin-top:28px!important;font-size:13px!important;color:#6b6e71!important}
.foot-bottom-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.foot-legal{font-size:13px;color:#45484b;border-bottom:1px solid #20242840;padding-bottom:2px}
.foot-legal:hover{color:var(--ink);border-color:var(--ink)}