/* Changeant (from Seide) - the pages behind the footer and the case study (Impressum, Kontakt,
   Datenschutz, AGB, AVV, Fallstudie). Loaded after site.css, which gives them the same
   fonts, tokens, top bar, buttons and footer as the homepage. No script; the silk is a
   still of the homepage's renderer, one calm band under the top bar. */

.doc { background: var(--bg); }
.doc-bar { position: sticky; top: 0; }
.doc-bar .bar__in { grid-template-columns: auto 1fr auto; column-gap: 40px; }
.doc-bar .bar__nav { justify-self: center; }
.doc-tel { font: 500 var(--fs-15)/1 var(--sans); color: var(--ink-2); }
.doc-tel:hover { color: var(--ink); }
/* Login and Menü are <details>: they open without a script and with the keyboard */
.doc-login, .doc-menu { position: relative; }
.doc-login > summary, .doc-menu > summary { list-style: none; cursor: pointer; }
.doc-login > summary::-webkit-details-marker, .doc-menu > summary::-webkit-details-marker { display: none; }
.doc-login[open] .chev { transform: rotate(180deg); }
.doc-login[open] > .login__menu { display: block; z-index: 2; }
.doc-menu { display: none; }
.doc-menu__c, .doc-menu[open] .doc-menu__o { display: none; }
.doc-menu[open] .doc-menu__c { display: inline; }
.doc-menu__panel { position: fixed; inset: var(--bar-h) 0 0 0; z-index: 40; display: flex; flex-direction: column; gap: 32px; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--rule); overflow-y: auto; }

.doc-main { padding: var(--sp-3) 0 var(--sp-9); }
/* the band bleeds off both edges; on narrow screens it is cropped, never thinned */
.doc-silk { display: block; width: 100%; height: clamp(84px, 15vw, 240px); margin-bottom: var(--sp-5); object-fit: cover; object-position: 50% 50%; pointer-events: none; user-select: none; }
.doc-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.doc-head { grid-column: 1 / span 4; position: sticky; top: calc(var(--bar-h) + 48px); }
.doc-kicker { font: 500 var(--fs-14)/1.4 var(--sans); color: var(--ink-3); }
.doc-kicker a { color: inherit; }
.doc-kicker a:hover { color: var(--ink); }
.doc-head h1 { margin-top: 14px; font: 300 var(--fs-56)/1.04 var(--serif); letter-spacing: -.02em; hyphens: manual; }
.doc-meta { margin-top: 20px; font: 500 var(--fs-15)/1.4 var(--sans); color: var(--ink-3); }
.toc { margin-top: var(--sp-5); display: grid; gap: 2px; border-left: 1px solid var(--rule); }
.toc a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 1px solid transparent; font: 500 var(--fs-14)/1.35 var(--sans); color: var(--ink-3); transition: color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out); }
.toc a:hover { color: var(--ink); border-left-color: var(--ink-3); }

.doc-long .doc-head h1 { font-size: var(--fs-40, clamp(30px, 2.8vw, 40px)); line-height: 1.1; }
@media (max-height: 820px) { .doc-head { position: static; } }

/* the text column */
.prose { grid-column: 6 / span 7; max-width: 68ch; font-size: var(--fs-17); line-height: 1.65; color: var(--ink-2); }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: var(--sp-6); font: 300 var(--fs-32)/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink); scroll-margin-top: calc(var(--bar-h) + 32px); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose h3 { margin-top: var(--sp-4); font: 600 var(--fs-17)/1.4 var(--sans); color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose h2 + h3 { margin-top: 20px; }
.prose strong { color: var(--ink); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: rgb(21 20 15 / .35); text-underline-offset: 3px; overflow-wrap: anywhere; transition: text-decoration-color var(--d-hover) var(--ease-out); }
.prose a:hover { text-decoration-color: var(--ink); }
.prose ul, .prose ol { display: grid; gap: 10px; padding-left: 1.4em; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; left: -1.4em; top: .82em; width: 8px; height: 1px; background: var(--ink-3); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.prose li > ul { margin-top: 10px; }
.prose .caps { font-size: var(--fs-15); letter-spacing: .01em; }
.prose .stand { margin-top: var(--sp-5); padding-top: 18px; border-top: 1px solid var(--rule); font-size: var(--fs-15); color: var(--ink-3); }

/* Impressum and Kontakt: label and value pairs */
.facts { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.facts dt { padding-right: var(--sp-4) !important; }
.facts dt, .facts dd { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font: 500 var(--fs-15)/1.5 var(--sans); color: var(--ink-3); }
.facts dd { color: var(--ink); }
.facts a { text-decoration: none; }
.facts a:hover { text-decoration: underline; }
.lead-l { font: 300 var(--fs-32)/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.big-link { display: inline-block; font: 300 var(--fs-48)/1.1 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.prose .big-link { text-decoration: none; }
.prose .big-link:hover { text-decoration: underline; text-decoration-thickness: 1px; }

/* the case study */
.case-doc .doc-head { grid-column: 1 / span 5; }
.case-doc .doc-head h1 { font-size: var(--fs-48); line-height: 1.08; }
.case-doc .case-logo { margin-top: var(--sp-5); width: 147px; height: 32px; filter: grayscale(1) contrast(1.15); opacity: .78; }
.case-doc .prose { grid-column: 7 / span 6; }
.figs { padding: 0 !important; list-style: none !important; display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--sp-5) var(--sp-4) !important; margin-block: var(--sp-5) var(--sp-4) !important; }
.figs > li::before { display: none; }
.figs > li > strong:first-child { display: block; margin-bottom: 8px; font: 300 var(--fs-48)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.prose .pill { text-decoration: none; }
.prose .pill--ink { color: #fff; }
.doc-cta { margin-top: var(--sp-7) !important; padding-top: var(--sp-5); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1023px) {
  .doc-bar .bar__in { grid-template-columns: 1fr auto; }
  .doc-bar .bar__end { gap: 8px; }
  .doc-bar .bar__end > .pill { display: inline-flex; }
  .doc-tel, .doc-login { display: none; }
  .doc-menu { display: block; }
  .doc-main { padding: var(--sp-2) 0 var(--sp-8); }
  .doc-silk { margin-bottom: var(--sp-4); }
  .doc-head, .case-doc .doc-head { position: static; grid-column: 1 / -1; }
  .doc-head h1 { font-size: clamp(36px, 10vw, 48px); }
  .case-doc .doc-head h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .toc { display: none; }
  .prose, .case-doc .prose { grid-column: 1 / -1; margin-top: var(--sp-5); }
  .facts { grid-template-columns: 1fr; }
  .facts dt { padding-bottom: 0; border-bottom: 0; }
  .facts dd { padding-top: 4px; }
  .big-link { font-size: clamp(28px, 8vw, 40px); }
  .figs { grid-template-columns: 1fr; }
  .figs > li > strong:first-child { font-size: 40px; }
  .doc-cta .pill { width: 100%; }
}
@media (max-width: 440px) { .doc-bar .bar__end > .pill { display: none; } }