/* Buchkarte – Buch-Oberfläche: Materialien, Licht und Schatten. Verändert nur Optik, keine Maße (Seitenaufteilung bleibt exakt). */

/* ---------- Tisch: Holzplanken mit Maserung, Lichtkegel, Vignette ---------- */
body {
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%, rgba(255,214,150,.13), transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 45%, transparent 55%, rgba(0,0,0,.65) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='260'><filter id='g' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.006 .22' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 -.25'/></filter><rect width='100%' height='100%' filter='url(%23g)' opacity='.55'/></svg>"),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 118px, rgba(0,0,0,.42) 118px 120px, rgba(255,255,255,.03) 120px 122px),
    radial-gradient(ellipse at 50% 40%, var(--table-1) 0%, var(--table-2) 100%);
  background-color: #120b07;
}

/* ---------- Schatten unter dem Buch ---------- */
.book-shadow { left: 2%; right: 2%; bottom: -4.5%; height: 9%; background: radial-gradient(ellipse at center, rgba(0,0,0,.8), transparent 68%); filter: blur(10px); }

/* ---------- Buchblock: sichtbare Seitenstapel ---------- */
.board { box-shadow: inset 0 0 40px rgba(0,0,0,.55), 0 22px 46px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.5); }
.board::before { content: ""; position: absolute; top: .9%; bottom: .9%; width: 6px; pointer-events: none; }
.board.right::before { right: 1px; background: repeating-linear-gradient(90deg, #d9c9a0 0 1px, #a89168 1px 2px, #c8b68a 2px 3px); border-radius: 0 2px 2px 0; box-shadow: 1px 0 3px rgba(0,0,0,.55), inset -2px 0 3px rgba(0,0,0,.25); }
.board.left::before { left: 1px; background: repeating-linear-gradient(90deg, #a89168 0 1px, #d9c9a0 1px 2px, #c8b68a 2px 3px); border-radius: 2px 0 0 2px; box-shadow: -1px 0 3px rgba(0,0,0,.55), inset 2px 0 3px rgba(0,0,0,.25); }

/* ---------- Papier: Faser, Alterung, Ränder ---------- */
.paper-face.front, .paper-face.back {
  background:
    linear-gradient(to right, rgba(70,40,10,.38) 0, rgba(70,40,10,.12) 4%, rgba(70,40,10,0) 11%),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(120,78,24,.20) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='9'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .24  0 0 0 0 .1  0 0 0 .38 -.08'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    var(--paper);
}
.paper-face.back { background:
    linear-gradient(to left, rgba(70,40,10,.38) 0, rgba(70,40,10,.12) 4%, rgba(70,40,10,0) 11%),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(120,78,24,.20) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='13'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .24  0 0 0 0 .1  0 0 0 .38 -.08'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>"),
    var(--paper); }
.pg::before { border: 1px solid rgba(120,90,45,.38); box-shadow: inset 0 0 0 .22em rgba(255,255,255,.12), 0 0 0 .22em rgba(120,90,45,.10); }
.rule { position: relative; height: .07em; width: 5.2em; background: linear-gradient(90deg, var(--gold-deep), transparent); }
.rule::after { content: ""; position: absolute; left: -.05em; top: 50%; width: .5em; height: .5em; background: var(--gold-deep); transform: translateY(-50%) rotate(45deg); }
.pn { letter-spacing: .12em; }
.pn::before, .pn::after { content: ""; display: inline-block; width: 1.6em; height: .06em; background: var(--gold-deep); opacity: .55; vertical-align: middle; margin: 0 .7em; }

/* Gutter (Falz) */
.gutter {
  width: 4.2em; left: calc(50% - 2.1em);
  background:
    linear-gradient(to right, transparent 0, rgba(255,255,255,.06) 38%, rgba(30,14,3,.42) 49%, rgba(0,0,0,.55) 50%, rgba(30,14,3,.42) 51%, rgba(255,255,255,.06) 62%, transparent 100%);
}

/* Blätter beim Umblättern: weicherer Schatten */
.face.front::after { background: linear-gradient(to right, rgba(0,0,0,.6), rgba(0,0,0,.12) 55%, rgba(255,255,255,.08) 100%); }
.face.back::after { background: linear-gradient(to left, rgba(0,0,0,.6), rgba(0,0,0,.12) 55%, rgba(255,255,255,.08) 100%); }

/* ---------- Einband: Material ---------- */
.cover-face {
  --grain: .5;
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.055) 42%, rgba(255,255,255,0) 54%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='l' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' seed='2' result='n'/><feDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='1.7' result='d'><feDistantLight azimuth='235' elevation='58'/></feDiffuseLighting><feColorMatrix in='d' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1 0 0 1.05 -.2'/></filter><rect width='100%' height='100%' filter='url(%23l)' opacity='.75'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, var(--cover-1) 0%, var(--cover-2) 100%);
  box-shadow: inset 0 0 80px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.07), inset 3px 0 6px rgba(0,0,0,.4);
}
/* Falz-Rille nahe am Rücken */
.cover-face::before { width: 2.2em; background: linear-gradient(90deg, rgba(0,0,0,.7) 0, rgba(0,0,0,.25) 55%, rgba(255,255,255,.07) 68%, rgba(0,0,0,.35) 70%, transparent 85%); }
/* genähte Kante */
.cover-face .cv::before { content: ""; position: absolute; inset: .55em; border: .11em dashed rgba(255,255,255,.2); border-radius: .35em; pointer-events: none; filter: drop-shadow(0 .05em 0 rgba(0,0,0,.6)); }
/* Messing-Ecken */
.cover-face .cv-frame::before { content: ""; position: absolute; inset: -1.3em; pointer-events: none;
  background:
    linear-gradient(135deg, var(--gold-hi), var(--gold-lo)) top left / 1.6em 1.6em no-repeat,
    linear-gradient(225deg, var(--gold-hi), var(--gold-lo)) top right / 1.6em 1.6em no-repeat,
    linear-gradient(45deg, var(--gold-hi), var(--gold-lo)) bottom left / 1.6em 1.6em no-repeat,
    linear-gradient(315deg, var(--gold-hi), var(--gold-lo)) bottom right / 1.6em 1.6em no-repeat;
  -webkit-mask: linear-gradient(135deg, #000 50%, transparent 50%) top left / 1.6em 1.6em no-repeat, linear-gradient(225deg, #000 50%, transparent 50%) top right / 1.6em 1.6em no-repeat, linear-gradient(45deg, #000 50%, transparent 50%) bottom left / 1.6em 1.6em no-repeat, linear-gradient(315deg, #000 50%, transparent 50%) bottom right / 1.6em 1.6em no-repeat;
          mask: linear-gradient(135deg, #000 50%, transparent 50%) top left / 1.6em 1.6em no-repeat, linear-gradient(225deg, #000 50%, transparent 50%) top right / 1.6em 1.6em no-repeat, linear-gradient(45deg, #000 50%, transparent 50%) bottom left / 1.6em 1.6em no-repeat, linear-gradient(315deg, #000 50%, transparent 50%) bottom right / 1.6em 1.6em no-repeat;
  opacity: .9; }
.cv-frame { border-width: .1em; opacity: .75; box-shadow: 0 0 0 .08em rgba(0,0,0,.35), inset 0 0 0 .08em rgba(0,0,0,.3); }
/* Lesezeichen-Band unten */
.cover-face .cv-hint::after { content: ""; position: absolute; left: 50%; top: 3.2em; width: 0; height: 0; }
.cover-face::after { /* bleibt für Blätter-Schatten reserviert */ }
.cv-rule { height: .1em; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .95; width: 9em; }
/* Goldprägung: Verlauf + Glanzstreifen */
.gold {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 40%, var(--gold-lo) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .05em 0 rgba(0,0,0,.65)) drop-shadow(0 0 .35em rgba(255,215,130,.12));
}
.cv h1.gold { background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%), linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 40%, var(--gold-lo) 100%); background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0; -webkit-background-clip: text; background-clip: text; animation: foil 7s ease-in-out 1.2s infinite; }
@keyframes foil { 0%, 55%, 100% { background-position: 160% 0, 0 0; } 80% { background-position: -60% 0, 0 0; } }
.cv-emblem { filter: drop-shadow(0 .06em 0 rgba(0,0,0,.6)); }

/* Material: Leinen */
.mat-linen .cover-face {
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 54%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, var(--cover-1) 0%, var(--cover-2) 100%);
}
.mat-linen .cover-face .cv::before { border-color: rgba(255,255,255,.28); }
/* Material: Holz */
.mat-wood .cover-face {
  background:
    linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.14) 42%, rgba(255,255,255,0) 54%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='w' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.012 .16' numOctaves='5' seed='7' result='n'/><feColorMatrix in='n' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.5 -.55'/></filter><rect width='100%' height='100%' filter='url(%23w)' opacity='.6'/></svg>"),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, var(--cover-1) 0%, var(--cover-2) 100%);
}
.mat-wood .cover-face .cv::before { border-style: solid; border-color: rgba(0,0,0,.28); border-width: .12em; }
/* Material: Samt */
.mat-velvet .cover-face {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(0,0,0,.35), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='v'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .22 -.04'/></filter><rect width='100%' height='100%' filter='url(%23v)'/></svg>"),
    linear-gradient(135deg, var(--cover-1) 0%, var(--cover-2) 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.06), inset 3px 0 6px rgba(0,0,0,.4);
}

/* Vorsatzpapier mit feinem Muster */
.endpaper { background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 .12em, transparent .12em .9em),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 .12em, transparent .12em .9em),
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.1), transparent 70%),
    linear-gradient(160deg, var(--ep-1), var(--ep-2)); }
.ep-card { background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 .2em rgba(0,0,0,.22), 0 .3em 1em rgba(0,0,0,.35); }

/* Fotos wie aufgeklebte Abzüge */
.photo { box-shadow: 0 .55em 1em rgba(0,0,0,.48), 0 .08em .2em rgba(0,0,0,.4), inset 0 0 0 .08em rgba(255,255,255,.07); transform: rotate(-.6deg); }
.photos-r .photo:nth-child(even), .photos-l .photo:nth-child(even) { transform: rotate(.7deg); }

/* Etiketten (vegan, Empfehlung …) deutlicher */
.bd { box-shadow: 0 .06em .14em rgba(0,0,0,.35); text-shadow: 0 .05em 0 rgba(0,0,0,.25); }

/* Bedienleiste */
.ui button { background: linear-gradient(180deg, rgba(70,44,24,.85), rgba(34,20,11,.9)); border-color: rgba(217,185,106,.55); box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,235,180,.12); }
.ui button:hover { background: linear-gradient(180deg, rgba(96,62,34,.95), rgba(52,31,17,.95)); }

@media (prefers-reduced-motion: reduce) { .cv h1.gold { animation: none; } }