/* Kartenseiten (/card/<ID>, /karte/<ID>), erzeugt von tools/gen_site.js. Farben, Schriften, Kopf und Fuß aus site.css. */
.cp { max-width: 1120px; margin: 0 auto; padding: 36px var(--gut) 60px }
.cp-crumbs { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--ink3); margin-bottom: 34px }
.cp-crumbs a { color: var(--ink2); text-decoration: none } .cp-crumbs a:hover { color: var(--ink); text-decoration: underline }
.cp-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start }
.cp-card { margin: 0; position: sticky; top: calc(var(--hh) + 24px) }
.cp-card img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 3.9% / 2.19%;
  box-shadow: 0 1px 2px rgba(0,0,0,var(--shA)), 0 24px 50px -18px rgba(0,0,0,var(--shB)); background: var(--bg2) }
.cp-kick { font: 600 15px/1.3 var(--caps); letter-spacing: .05em; color: var(--ink2); margin-bottom: 18px }
.cp-kick span { color: var(--accT) }
.cp-q { font: 500 clamp(28px, 3.2vw, 42px)/1.18 var(--serif); letter-spacing: -.012em; margin: 0 0 18px; text-wrap: pretty; quotes: "„" "“" }
:lang(en) .cp-q, .cp-q:lang(en) { quotes: "“" "”" }
.cp-q::before { content: open-quote } .cp-q::after { content: close-quote }
.cp-who { font: 500 13px/1.5 var(--mono); letter-spacing: .06em; color: var(--ink2); margin-bottom: 22px }
.cp-who b { color: var(--ink); font-weight: 500 }
.cp-orig { margin: 0 0 26px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule) }
.cp-orig summary { cursor: pointer; padding: 12px 0; font: 600 16px/1 var(--caps); letter-spacing: .03em; list-style: none }
.cp-orig summary::-webkit-details-marker { display: none }
.cp-orig summary::after { content: " ›"; display: inline-block; transition: transform .2s } .cp-orig[open] summary::after { transform: rotate(90deg) }
.cp-orig blockquote { margin: 0 0 8px; font: italic 500 22px/1.4 var(--serif); color: var(--ink) }
.cp-tr { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; color: var(--ink3); padding-bottom: 14px }
.cp-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px }
.cp-act .btn { text-decoration: none; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: var(--r-ctl, 9px) }
.cp-act .badge { height: 44px }
.cp-note { color: var(--ink3); font-size: 16px; margin-top: 10px }
.cp-rows { margin-top: 38px; display: grid; gap: 0; border-top: 1px solid var(--rule) }
.cp-row { padding: 18px 0; border-bottom: 1px solid var(--rule) }
.cp-row h2 { font: 600 15px/1.2 var(--caps); letter-spacing: .05em; color: var(--ink2); margin-bottom: 6px }
.cp-row p { color: var(--ink); font-size: 19px; line-height: 1.5; text-wrap: pretty }
.cp-row p + p { margin-top: 8px }
.cp-src { font: 600 15px/1.3 var(--caps); letter-spacing: .03em; color: var(--accT) }
.cp-dim { color: var(--ink3) !important; font-size: 16px !important }
.cp-pn { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center }
.cp-nb { text-decoration: none; display: grid; gap: 4px } .cp-next { text-align: right }
.cp-nl { font: 600 15px/1.2 var(--caps); letter-spacing: .03em } .cp-nt { font: 500 12px/1.3 var(--mono); color: var(--ink3) }
.cp-nb:hover .cp-nl { text-decoration: underline }
.cp-all { font: 600 15px/1.2 var(--caps); letter-spacing: .03em; color: var(--ink2) }
@media (max-width: 760px) {
  .cp { padding: 22px 16px 40px }
  .cp-crumbs { margin-bottom: 20px }
  .cp-grid { grid-template-columns: 1fr; gap: 28px }
  .cp-card { position: static; width: min(78vw, 360px); margin: 0 auto }
  .cp-row p { font-size: 18px }
  .cp-pn { grid-template-columns: 1fr 1fr } .cp-all { grid-column: 1 / -1; grid-row: 2; text-align: center }
}

/* 404: drei zufällige Karten als Fächer, darunter die Überschrift wie auf den Karten */
.nf { max-width: 1120px; margin: 0 auto; padding: 56px var(--gut) 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 90px); align-items: center; min-height: calc(100svh - var(--hh) - 120px) }
.nf-fan { position: relative; height: clamp(320px, 42vw, 500px) }
.nf-c { position: absolute; left: 50%; top: 50%; height: 88%; width: auto; aspect-ratio: 9 / 16; border-radius: 3.9% / 2.19%; background: var(--bg2);
  box-shadow: 0 1px 2px rgba(0,0,0,var(--shA)), 0 22px 44px -16px rgba(0,0,0,var(--shB)); transition: transform .6s cubic-bezier(.3,.8,.3,1) }
.nf-c0 { transform: translate(-50%, -50%) translateX(-34%) rotate(-9deg) }
.nf-c2 { transform: translate(-50%, -50%) translateX(34%) rotate(8deg) }
.nf-c1 { transform: translate(-50%, -52%); z-index: 1 }
.nf-fan:hover .nf-c0 { transform: translate(-50%, -50%) translateX(-42%) rotate(-12deg) }
.nf-fan:hover .nf-c2 { transform: translate(-50%, -50%) translateX(42%) rotate(11deg) }
.nf-k { font: 500 14px/1 var(--mono); letter-spacing: .18em; color: var(--accT); margin-bottom: 18px }
.nf .hl { margin-bottom: 22px }
.nf-p { color: var(--ink2); font-size: 20px; line-height: 1.5; max-width: 30em; margin-bottom: 12px }
.nf-de { font-size: 17px; color: var(--ink3) } .nf-de a { color: var(--ink2) }
.nf-act { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px }
.nf-act .btn { text-decoration: none; display: inline-flex; align-items: center; height: 46px; padding: 0 22px }
@media (max-width: 760px) {
  .nf { grid-template-columns: 1fr; padding: 28px 16px 60px; gap: 18px; min-height: 0 }
  .nf-fan { height: 300px }
  .nf-p { font-size: 18px }
}