/* Entwurf 8 · typo.html: 20 Varianten für das Wort-Logo. Alles reines CSS. */
.typo .back { margin: 22px 0 0; font: 400 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.typo .back a { color: var(--label); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.typo .page-head { text-align: center; }
.tgrid { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) 90px; display: grid; gap: 56px; }
.tcard { margin: 0; }
.pair { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pair { grid-template-columns: 1fr 1fr; align-items: stretch; gap: 22px; } }
.pane { container-type: inline-size; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.poster { aspect-ratio: 3.4 / 1; background: #111 url(../assets/video/hero-quer.jpg) 50% 50% / cover; color: #fff; }
.poster::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.poster .lk { position: relative; z-index: 1; text-shadow: 0 1px 24px rgba(0, 0, 0, .25); }
.card45 { aspect-ratio: 4 / 5; background: #fff; color: #000; border: 1px solid var(--line); }
@media (min-width: 900px) { .card45 { aspect-ratio: auto; min-height: 0; } .poster { aspect-ratio: 3.4 / 1; } }
.cap { margin: 14px 0 0; font: 400 11px/1.5 'Jost', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #666; }
.cap b { font-weight: 500; color: #1A1B1D; }

/* Lockup-Grundlage */
.lk { text-align: center; padding: 0 4cqw; position: relative; }
.lk .n, .lk .k { letter-spacing: var(--ls, 0); padding-left: var(--ls, 0); margin: 0; }
.lk .n { font-size: clamp(30px, calc(var(--s, 7) * 1cqw), 64px); line-height: 1.08; }
.lk .k { font-size: clamp(10px, 2cqw, 12px); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; line-height: 1.4; font-family: 'Jost', sans-serif; font-weight: 400; margin-top: 1.1em; }
@media (min-width: 900px) { .poster .lk .n { font-size: clamp(30px, calc(var(--s, 7) * .8cqw), 52px); } }
@container (max-width: 560px) { .lk .n { font-size: clamp(26px, calc(var(--s, 7) * 1cqw), 40px); } }

/* 01 */ .v01 { --s: 5.6; } .v01 .n { --ls: .3em; font: 400 1em/1.1 'Bodoni Moda', serif; text-transform: uppercase; font-size: clamp(26px, 5.6cqw, 60px); letter-spacing: .3em; }
/* 02 */ .v02 { --s: 8.5; } .v02 .n { font-family: 'Bodoni Moda', serif; font-weight: 400; text-transform: uppercase; letter-spacing: .5em; padding-left: .5em; line-height: 1.15; }
.v02 .k { order: -1; margin: 0 0 1.4em; padding: 0 .3em .9em; border-bottom: 1px solid currentColor; display: inline-block; font-size: 10px; letter-spacing: .34em; opacity: .9; }
.v02 { display: flex; flex-direction: column; align-items: center; }
/* 03 */ .v03 { --s: 9; } .v03 .n { font-family: 'Bodoni Moda', serif; font-style: italic; font-weight: 400; letter-spacing: .01em; }
.v03 .k { margin-top: .9em; }
/* 04 */ .v04 { --s: 8; } .v04 .n { font-family: 'Playfair Display', serif; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.v04 .k { font-family: 'Playfair Display', serif; font-style: italic; text-transform: none; letter-spacing: .06em; padding-left: .06em; font-size: clamp(12px, 2.4cqw, 15px); }
/* 05 */ .v05 { --s: 9.5; } .v05 .n { font-family: 'Italiana', serif; font-weight: 400; text-transform: uppercase; letter-spacing: .12em; padding-left: .12em; }
.v05 { display: flex; flex-direction: column; align-items: center; } .v05 .k { order: -1; margin: 0 0 1em; }
/* 06 */ .v06 { --s: 6.4; } .v06 .n { font-family: 'Cinzel', serif; font-weight: 400; text-transform: uppercase; letter-spacing: .14em; padding-left: .14em; }
.v06 .k { font-family: 'Cinzel', serif; letter-spacing: .3em; font-size: clamp(10px, 1.9cqw, 12px); }
/* 07 */ .v07 { --s: 10; } .v07 .n { font-family: 'Libre Caslon Display', serif; font-weight: 400; line-height: 1.02; letter-spacing: .005em; }
.v07 .k { margin: 0 0 1.2em; } .v07 .k span { display: inline-flex; align-items: center; gap: 1.4em; }
.v07 .k span::before, .v07 .k span::after { content: ""; width: 3.6em; height: 1px; background: currentColor; opacity: .8; }
.v07 { display: flex; flex-direction: column; align-items: center; } .v07 .k { order: -1; }
/* 08 */ .v08 { --s: 5.8; } .v08 .n { font-family: 'Cormorant', serif; font-weight: 300; text-transform: uppercase; letter-spacing: .3em; padding-left: .3em; }
/* 09 */ .v09 { --s: 10; } .v09 .n { font-family: 'Cormorant', serif; font-weight: 300; font-style: italic; letter-spacing: .02em; }
/* 10 */ .v10 { --s: 6; } .v10 .n { font-family: 'Gilda Display', serif; text-transform: uppercase; letter-spacing: .2em; padding-left: .2em; }
/* 11 */ .v11 { --s: 8.5; } .v11 .n { font-family: 'Prata', serif; letter-spacing: .02em; } .v11 .n b { font-weight: 400; margin: 0 .25em; }
/* 12 */ .v12 { --s: 6.4; } .v12 .n { font-family: 'Marcellus', serif; text-transform: uppercase; letter-spacing: .2em; padding-left: .2em; }
.v12 .k { font-family: 'Tenor Sans', sans-serif; }
/* 13 */ .v13 { --s: 6.2; } .v13 .n { font-family: 'Forum', serif; text-transform: uppercase; letter-spacing: .22em; padding-left: .22em; white-space: nowrap; }
.v13 .k { font-family: 'Tenor Sans', sans-serif; }
/* 14 */ .v14 { --s: 7; } .v14 .n { font-family: 'DM Serif Display', serif; text-transform: uppercase; letter-spacing: .06em; padding-left: .06em; }
.v14 .n i { font-style: italic; }
/* 15 */ .v15 { --s: 11; } .v15 .n { font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; letter-spacing: -.01em; }
.v15 .k { font-family: 'Fraunces', serif; font-weight: 900; font-size: 10px; letter-spacing: .34em; margin-top: 1.2em; }
/* 16 */ .v16 { --s: 5.2; } .v16 .n { font-family: 'Montserrat', sans-serif; font-weight: 200; text-transform: uppercase; letter-spacing: .5em; padding-left: .5em; line-height: 1.2; font-size: clamp(22px, 4.4cqw, 52px); }
.v16 .k { font-family: 'Raleway', sans-serif; font-weight: 200; letter-spacing: .5em; padding-left: .5em; font-size: clamp(10px, 1.9cqw, 12px); }
/* 17 */ .v17 { --s: 7.4; } .v17 .n { font-family: 'Abril Fatface', serif; text-transform: uppercase; letter-spacing: .04em; padding-left: .04em; }
/* 18 */ .v18 { --s: 9; } .v18 .n { font-family: 'Rozha One', serif; letter-spacing: .02em; line-height: 1.02; }
.v18 .k { font-family: 'Yeseva One', serif; letter-spacing: .3em; }
/* 19 */ .v19 { --s: 8; } .v19 .n { line-height: 1; } .v19 .n span { display: block; }
.v19 .a { font-family: 'Bodoni Moda', serif; font-weight: 700; text-transform: uppercase; letter-spacing: .22em; padding-left: .22em; font-size: 1em; }
.v19 .b { font-family: 'Cormorant', serif; font-style: italic; font-weight: 400; font-size: 1.3em; margin-top: .05em; }
/* 20 */ .v20 { --s: 7; } .v20 .mono { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); font: 400 clamp(90px, 38cqw, 300px)/1 'Bodoni Moda', serif; letter-spacing: -.02em; opacity: .16; pointer-events: none; white-space: nowrap; }
.v20 .n { position: relative; font-family: 'Cormorant', serif; font-weight: 400; letter-spacing: .06em; padding-left: .06em; }
.v20 .k { position: relative; }
@media (min-width: 900px) { .poster .v20 .mono { font-size: clamp(90px, 26cqw, 200px); } }