/* the crumble — shared page layout. Loads after tokens.css and components.css. */

html body { margin: 0; background: var(--surface-inverse); }

.page { --gutter: 40px; --ease: cubic-bezier(.22, .8, .2, 1);
  position: relative; min-height: 100%; font-family: var(--font-sans); color: var(--ink); background: var(--surface); overflow-x: clip; -webkit-font-smoothing: antialiased; }
.page .tc-section { overflow: clip; }
.page figure { margin: 0; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.page .site-header { position: sticky; top: 0; z-index: 40; padding: 0 var(--gutter); }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font: 700 16px/24px var(--font-sans); text-decoration: none; transition: color .2s ease-out; }
.back-link:hover { color: var(--brand); }
.back-link .arrow { display: inline-block; transition: transform .2s ease-out; }
.back-link:hover .arrow { transform: translateX(-3px); }
.back-link:focus-visible { outline: var(--border-outline) solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* ---------- title band on sub pages ---------- */
.legal-head .tc-section__inner { max-width: 1040px; }
.page .legal-head .tc-section-title { margin-bottom: 24px; }
.legal-head__lead { margin: 0; max-width: 42ch; font: 500 20px/30px var(--font-sans); }

/* ---------- language switch (Deutsch / English) ---------- */
.lang-switch { display: inline-flex; gap: 4px; padding: 3px; border: var(--border-outline) solid var(--line); border-radius: var(--radius-md); }
.lang-switch__btn { min-width: 96px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--ink);
  font: 700 15px/20px var(--font-sans); cursor: pointer; transition: background-color .2s ease-out, color .2s ease-out; }
.lang-switch__btn:hover { background: var(--line-soft); }
.lang-switch__btn[aria-pressed="true"], .lang-switch__btn[aria-pressed="true"]:hover { background: var(--ink); color: var(--surface); }
.lang-switch__btn:focus-visible { outline: var(--border-outline) solid var(--focus); outline-offset: 2px; }

/* ---------- sticky bar under the title band ---------- */
.pp-bar { position: sticky; top: var(--header-height); z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.pp-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1040px; margin: 0 auto; padding: 10px var(--gutter); }

/* ---------- footer ---------- */
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 48px; }
.footer__brand { display: inline-flex; color: var(--crumble-cream); }
.page .footer__brand .tc-logo { width: 160px; }
.footer__cols { display: grid; grid-template-columns: repeat(2, auto); gap: 32px 72px; }
.footer__cols--3 { grid-template-columns: repeat(3, auto); }
.footer__label { margin: 0 0 10px; font: 800 13px/16px var(--font-sans); letter-spacing: .12em; color: var(--crumble-cream); }
.footer__text { margin: 0; font: 400 14px/22px var(--font-sans); }
.footer__text--handle { margin-bottom: 10px; }
.footer__list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font: 600 14px/22px var(--font-sans); }
.page .footer__social { justify-content: flex-start; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255, 247, 235, .18); font: 600 12px/16px var(--font-sans); }
.page .footer__bottom .tc-footer__links { justify-content: flex-start; font-size: 13px; }
.page .tc-footer a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .footer__cols--3 { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 640px) {
  .page { --gutter: 16px; }
  .back-link .back-link__label { display: none; }
  .footer__cols, .footer__cols--3 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- motion: calm load-in on sub pages ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }
@keyframes drawX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: no-preference) {
  .motion-on .load-in { animation: fadeUp 1s var(--ease) var(--d, .1s) both; }
  .motion-on .legal-head .tc-section-title::before { transform-origin: left center; animation: drawX 1.2s var(--ease) .3s both; }
}