.buch-seite {
--grund: var(--weiss);
--stimme: var(--violett);
--stimme-klein: var(--violett);
--lesen: var(--violett);
}
.buechlein-sektion {
min-height: 100svh;
}
.buechlein-huelle {
display: grid;
justify-items: center;
gap: var(--s-l);
}
.buechlein {
--rand: calc(var(--kopf-h) + 13rem);
width: min(100%, 30rem, max(17rem, (100svh - var(--rand)) * 0.8));
}
.buechlein[data-doppel] {
width: min(100%, 68rem, max(34rem, (100svh - var(--rand)) * 1.6));
}
.buch-block {
display: grid;
grid-template-columns: 1fr;
column-gap: 2px;
perspective: 1800px;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.buechlein[data-doppel] .buch-block { grid-template-columns: 1fr 1fr; }
.buch-seite {
grid-area: 1 / 1;
aspect-ratio: 4 / 5;
min-width: 0;
container-type: inline-size;
display: grid;
grid-template-rows: 1fr auto;
padding: 10% 10% 7% 9%;
background: var(--grund);
color: var(--lesen);
border-radius: 0 var(--r-flaeche) var(--r-flaeche) 0;
box-shadow: var(--block-rechts, none);
}
.buechlein[data-doppel] .buch-block > .buch-seite:nth-child(odd) {
grid-column: 1;
border-radius: var(--r-flaeche) 0 0 var(--r-flaeche);
padding: 10% 9% 7% 10%;
box-shadow: var(--block-links, none);
}
.buechlein[data-doppel] .buch-block > .buch-seite:nth-child(even) { grid-column: 2; }
.buechlein[data-rechts="1"] { --block-rechts: 3px 3px 0 var(--violett), 6px 6px 0 var(--weiss); }
.buechlein[data-rechts="2"] { --block-rechts: 3px 3px 0 var(--violett), 6px 6px 0 var(--weiss), 9px 9px 0 var(--violett), 12px 12px 0 var(--weiss); }
.buechlein[data-rechts="3"] { --block-rechts: 3px 3px 0 var(--violett), 6px 6px 0 var(--weiss), 9px 9px 0 var(--violett), 12px 12px 0 var(--weiss), 15px 15px 0 var(--violett), 18px 18px 0 var(--weiss); }
.buechlein[data-links="1"]  { --block-links: -3px 3px 0 var(--violett), -6px 6px 0 var(--weiss); }
.buechlein[data-links="2"]  { --block-links: -3px 3px 0 var(--violett), -6px 6px 0 var(--weiss), -9px 9px 0 var(--violett), -12px 12px 0 var(--weiss); }
.buechlein[data-links="3"]  { --block-links: -3px 3px 0 var(--violett), -6px 6px 0 var(--weiss), -9px 9px 0 var(--violett), -12px 12px 0 var(--weiss), -15px 15px 0 var(--violett), -18px 18px 0 var(--weiss); }
.buechlein:not([data-rechts]) { --block-rechts: 3px 3px 0 var(--violett), 6px 6px 0 var(--weiss), 9px 9px 0 var(--violett), 12px 12px 0 var(--weiss); }
.buch-satz {
margin: 0;
align-self: center;
min-width: 0;
}
.buch-satz p { margin: 0; max-width: none; }
.buch-spruch {
display: block;
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
color: var(--stimme);
font-size: 9cqi;
line-height: 1.04;
letter-spacing: -0.01em;
text-wrap: balance;
hyphens: auto;
hyphenate-limit-chars: 12 5 5;
overflow-wrap: break-word;
}
.buch-satz[data-stufe="kurz"] .buch-spruch { font-size: 12.5cqi; letter-spacing: -0.02em; }
.buch-satz[data-stufe="lang"] .buch-spruch { font-size: 6.6cqi; }
.buch-stichwort {
display: block;
font-family: var(--lauf);
font-weight: 900;
font-size: max(15px, 4.8cqi);
line-height: 1.2;
margin-block-end: 3cqi;
hyphens: auto;
}
.buch-wort {
display: inline-block;
max-width: 100%;
transform-origin: 50% 88%;
}
.buch-pointe {
display: inline-block;
max-width: 100%;
padding: 0.12em 0.42em 0.06em;
border-radius: var(--r-kapsel);
background: linear-gradient(var(--violett), var(--violett)) no-repeat 0 0 / 100% 100%;
color: var(--gelb);
}
.buch-pointe[data-bricht] { border-radius: var(--r-feld); }
.buch-stumm .buch-satz p { visibility: hidden; }
@media (forced-colors: active) {
.buch-pointe { border: 2px solid CanvasText; }
}
.buch-zahl {
margin: 0;
justify-self: end;
font-weight: 900;
font-size: max(14px, 3.6cqi);
font-variant-numeric: tabular-nums;
line-height: 1;
}
.buechlein[data-doppel] .buch-block > .buch-seite:nth-child(odd) .buch-zahl { justify-self: start; }
.buch-titel {
font-family: var(--display);
font-weight: 900;
text-transform: uppercase;
font-size: 15.5cqi;
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--stimme);
}
.buch-autor {
margin-block-start: 5cqi !important;
font-weight: 900;
font-size: max(16px, 6cqi);
line-height: 1.1;
}
.buch-untertitel {
margin-block-start: 1.5cqi !important;
font-size: max(16px, 4.6cqi);
line-height: 1.25;
}
.buch-schluss .knopf { margin-block-start: 7cqi; }
.buch-titelblatt, .buch-schluss { grid-template-rows: 1fr; }
.buch-leer { box-shadow: none; }
.buch-blatt {
grid-area: 1 / 1;
position: relative;
z-index: 2;
transform-style: preserve-3d;
pointer-events: none;
}
.buechlein[data-doppel] .buch-blatt[data-seite-rechts] { grid-column: 2; transform-origin: left center; }
.buechlein[data-doppel] .buch-blatt[data-seite-links]  { grid-column: 1; transform-origin: right center; }
.buechlein:not([data-doppel]) .buch-blatt { transform-origin: left center; }
.buch-blatt > .buch-seite {
grid-area: auto;
position: absolute;
inset: 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
box-shadow: none;
}
.buch-blatt > .buch-rueckseite { transform: rotateY(180deg); }
.buch-blatt > .als-links {
border-radius: var(--r-flaeche) 0 0 var(--r-flaeche);
padding: 10% 9% 7% 10%;
}
.buch-blatt > .als-links .buch-zahl { justify-self: start; }
.buch-blatt > .als-rechts {
border-radius: 0 var(--r-flaeche) var(--r-flaeche) 0;
padding: 10% 10% 7% 9%;
}
.buch-blatt > .als-rechts .buch-zahl { justify-self: end; }
.buechlein[data-skript] .buch-block { cursor: pointer; }
.buechlein-steuerung {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "zurueck zaehler weiter" "zufall zufall zufall";
align-items: center;
column-gap: var(--s-s);
row-gap: var(--s-m);
width: min(100%, 34rem);
}
.buechlein-pfeil {
display: inline-flex;
align-items: center;
gap: var(--s-xs);
min-height: 44px;
}
.buechlein-pfeil[data-zurueck] { grid-area: zurueck; justify-self: start; }
.buechlein-pfeil[data-weiter]  { grid-area: weiter;  justify-self: end; }
.buechlein-pfeil svg { flex: none; }
.buechlein-pfeil[aria-disabled="true"] {
border-style: dashed;
cursor: default;
pointer-events: none;
}
.buechlein-zaehler {
grid-area: zaehler;
margin: 0;
font-weight: 900;
font-variant-numeric: tabular-nums;
text-align: center;
white-space: nowrap;
color: var(--lesen);
}
.buechlein-zufall { grid-area: zufall; justify-self: center; }
@media (max-width: 26rem) {
.buechlein-pfeil { padding-inline: 12px; }
.buechlein-pfeil span {
position: absolute; width: 1px; height: 1px;
margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.buch-block { perspective: none; }
}