
:root{
  --ccz-ink:#4a2f1f;
  --ccz-paper:#e6cfa4;
  --ccz-paper-2:#dcc18f;
  --ccz-edge:#8d6841;
  --ccz-gold:#b68a45;
}
.ccz-wrap{max-width:1320px;margin:0 auto;padding:28px 18px 60px;color:var(--ccz-ink)}
.ccz-cover{max-width:900px;margin:0 auto 40px;text-align:center}
.ccz-cover-image img{display:block;max-width:100%;max-height:82vh;width:auto;margin:0 auto;border-radius:12px;box-shadow:0 18px 48px rgba(55,35,22,.23)}
.ccz-cover h1{font-family:Georgia,"Times New Roman",serif;color:var(--ccz-ink);font-size:clamp(2rem,4vw,3rem);margin:18px 0 0}
.ccz-book-shell{max-width:1180px;margin:0 auto 38px}
.ccz-book-frame{
  padding:18px;
  border-radius:24px;
  background:
    linear-gradient(90deg,#4d321f 0 3%,#6c4a2e 4% 7%,#3a2418 8% 92%,#6c4a2e 93% 96%,#4d321f 97% 100%);
  box-shadow:0 24px 48px rgba(43,28,18,.32), inset 0 0 0 2px rgba(255,255,255,.04);
}
.ccz-book{position:relative}
.ccz-spread{
  display:none;
  grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);
  min-height:620px;
  border-radius:15px;
  overflow:hidden;
}
.ccz-spread.is-active{display:grid}
.ccz-page{
  position:relative;
  min-width:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.32),transparent 30%),
    radial-gradient(circle at 78% 82%,rgba(125,88,48,.07),transparent 32%),
    repeating-linear-gradient(0deg,rgba(96,66,39,.025) 0 1px,transparent 1px 8px),
    linear-gradient(90deg,rgba(105,72,43,.12),transparent 13%,transparent 87%,rgba(105,72,43,.10)),
    var(--ccz-paper);
}
.ccz-page:before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(98,67,39,.22);
  border-radius:6px;
  pointer-events:none;
}
.ccz-page-left{
  border-radius:14px 3px 3px 14px;
  box-shadow:inset -22px 0 30px rgba(68,42,24,.13);
}
.ccz-page-right{
  border-radius:3px 14px 14px 3px;
  box-shadow:inset 22px 0 30px rgba(68,42,24,.13);
}
.ccz-gutter{
  background:
    linear-gradient(90deg,
      rgba(44,26,15,.52) 0%,
      rgba(101,66,38,.30) 24%,
      rgba(232,207,164,.26) 49%,
      rgba(101,66,38,.30) 76%,
      rgba(44,26,15,.52) 100%);
  box-shadow:inset 0 0 16px rgba(29,18,10,.42);
}
.ccz-page-inner{
  position:relative;
  z-index:1;
  box-sizing:border-box;
  height:100%;
  padding:54px 58px 66px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.08rem;
  line-height:1.78;
  color:var(--ccz-ink);
}
.ccz-page-inner p{margin:0 0 1.1em}
.ccz-page-inner p:first-child:first-letter{
  float:left;
  font-size:3em;
  line-height:.85;
  padding-right:.08em;
  padding-top:.08em;
  color:var(--ccz-gold);
}
.ccz-book-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:14px;
}
.ccz-turn{
  width:42px;height:42px;border:1px solid rgba(82,53,31,.22);border-radius:50%;
  background:#ead7b4;color:#5a3a24;font-size:1.45rem;line-height:1;cursor:pointer;
  transition:box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.ccz-turn:hover{background:#f0dfbf;box-shadow:0 0 12px rgba(184,141,70,.28);transform:translateY(-1px)}
.ccz-turn[disabled]{opacity:.28;cursor:default;box-shadow:none;transform:none}
.ccz-counter{font-family:Georgia,serif;color:#6a4932;font-size:.95rem}
.ccz-cards{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ccz-cards article{padding:24px 26px;border:1px solid rgba(117,77,44,.24);border-radius:16px;background:linear-gradient(180deg,#ead7b5,#e0c79a);box-shadow:0 12px 26px rgba(55,34,20,.12)}
.ccz-cards h2{font-family:Georgia,serif;margin:0 0 10px;color:var(--ccz-ink)}
.ccz-cards p{margin:0;line-height:1.65}
.ccz-cards a{display:inline-block;padding:11px 17px;border-radius:999px;background:#7a5634;color:#fff!important;text-decoration:none}
.ccz-flip-next .ccz-page-right{animation:ccz-next .45s ease;transform-origin:left center}
.ccz-flip-prev .ccz-page-left{animation:ccz-prev .45s ease;transform-origin:right center}
@keyframes ccz-next{0%{transform:perspective(1200px) rotateY(0)}50%{transform:perspective(1200px) rotateY(-8deg)}100%{transform:perspective(1200px) rotateY(0)}}
@keyframes ccz-prev{0%{transform:perspective(1200px) rotateY(0)}50%{transform:perspective(1200px) rotateY(8deg)}100%{transform:perspective(1200px) rotateY(0)}}
@media(max-width:800px){
  .ccz-book-frame{padding:10px}
  .ccz-spread,.ccz-spread.is-active{display:block;min-height:0}
  .ccz-gutter{display:none}
  .ccz-page{border-radius:12px!important;margin-bottom:12px}
  .ccz-page-inner{height:auto;min-height:0;padding:34px 28px 42px;font-size:1rem;line-height:1.68}
  .ccz-book-controls{display:none}
  .ccz-cards{grid-template-columns:1fr}
}


/* === 0.5: dezente magische Umblätter-Ecken === */
.ccz-book-shell{position:relative}
.ccz-book-controls{
  position:absolute;
  inset:18px;
  margin:0;
  display:block;
  pointer-events:none;
  z-index:20;
}
.ccz-counter{display:none}
.ccz-turn{
  position:absolute;
  bottom:0;
  width:92px;
  height:92px;
  border:0;
  border-radius:0;
  background:transparent;
  color:transparent;
  padding:0;
  pointer-events:auto;
  overflow:visible;
  transform:none;
  box-shadow:none;
  transition:none;
}
.ccz-prev{left:0}
.ccz-next{right:0}
.ccz-turn::before{
  content:"";
  position:absolute;
  bottom:12px;
  width:38px;
  height:38px;
  opacity:.28;
  transition:opacity .28s ease, filter .28s ease, transform .28s ease;
}
.ccz-prev::before{
  left:14px;
  border-left:1px solid rgba(177,132,61,.72);
  border-bottom:1px solid rgba(177,132,61,.72);
  border-bottom-left-radius:28px;
}
.ccz-next::before{
  right:14px;
  border-right:1px solid rgba(177,132,61,.72);
  border-bottom:1px solid rgba(177,132,61,.72);
  border-bottom-right-radius:28px;
}
.ccz-turn::after{
  content:"✦";
  position:absolute;
  bottom:22px;
  font-size:13px;
  color:#b68a45;
  opacity:0;
  text-shadow:0 0 6px rgba(216,174,91,.55);
  transition:opacity .28s ease, transform .28s ease;
}
.ccz-prev::after{left:24px}
.ccz-next::after{right:24px}
.ccz-turn:hover,
.ccz-turn:focus-visible{
  background:transparent;
  box-shadow:none;
  transform:none;
  outline:none;
}
.ccz-turn:not([disabled]):hover::before,
.ccz-turn:not([disabled]):focus-visible::before{
  opacity:.95;
  filter:drop-shadow(0 0 5px rgba(213,169,82,.55));
}
.ccz-turn:not([disabled]):hover::after,
.ccz-turn:not([disabled]):focus-visible::after{
  opacity:.9;
  transform:translateY(-2px);
}
.ccz-turn[disabled]{opacity:0;pointer-events:none}

/* Kleiner Zauberstab als Cursor – nur über einer aktiven Umblätter-Ecke. */
.ccz-turn:not([disabled]){
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(-38 16 16)'%3E%3Cpath d='M15 5h2v20h-2z' fill='%23513a28'/%3E%3Cpath d='M15 4h2v7h-2z' fill='%23c99b49'/%3E%3Ccircle cx='16' cy='4' r='2' fill='%23e3bd69'/%3E%3C/g%3E%3Cpath d='M23 5l1 2 2 1-2 1-1 2-1-2-2-1 2-1z' fill='%23d4a952'/%3E%3C/svg%3E") 8 25, pointer;
}

/* Das Leuchten bleibt bewusst sehr zurückhaltend. */
.ccz-book-frame.ccz-corner-glow-left{
  box-shadow:0 24px 48px rgba(43,28,18,.32), inset 18px -14px 30px rgba(207,160,76,.09);
}
.ccz-book-frame.ccz-corner-glow-right{
  box-shadow:0 24px 48px rgba(43,28,18,.32), inset -18px -14px 30px rgba(207,160,76,.09);
}

/* Sanftere, buchartige Bewegung beim Wechsel. */
.ccz-flip-next .ccz-page-right{
  animation:ccz-next-magic .56s cubic-bezier(.45,.05,.25,1);
  transform-origin:left center;
}
.ccz-flip-prev .ccz-page-left{
  animation:ccz-prev-magic .56s cubic-bezier(.45,.05,.25,1);
  transform-origin:right center;
}
@keyframes ccz-next-magic{
  0%{transform:perspective(1400px) rotateY(0);filter:brightness(1)}
  48%{transform:perspective(1400px) rotateY(-13deg);filter:brightness(1.035)}
  100%{transform:perspective(1400px) rotateY(0);filter:brightness(1)}
}
@keyframes ccz-prev-magic{
  0%{transform:perspective(1400px) rotateY(0);filter:brightness(1)}
  48%{transform:perspective(1400px) rotateY(13deg);filter:brightness(1.035)}
  100%{transform:perspective(1400px) rotateY(0);filter:brightness(1)}
}
@media(max-width:800px){
  .ccz-book-controls{display:none}
}


/* === 0.6: sichtbare alte Zeigehände in den Buchecken === */
/* Die funktionierende Ecknavigation aus 0.5 bleibt unverändert. */
.ccz-turn::after{
  content:"";
  position:absolute;
  bottom:15px;
  width:50px;
  height:31px;
  opacity:.62;
  transform:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  filter:sepia(.72) saturate(.62) brightness(.66);
  transition:opacity .28s ease, filter .28s ease, transform .28s ease;
}

/* Kleine gezeichnete Hand, absichtlich wie eine alte Buchillustration.
   SVG ist direkt eingebettet: keine zusätzliche Bilddatei nötig. */
.ccz-next::after{
  right:13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60' viewBox='0 0 100 60'%3E%3Cg fill='none' stroke='%23553b28' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 34c10-2 17-3 25-2l21 2 19-1 13-5c4-1 7 1 7 4 0 2-2 4-5 5l-16 7-20 4-18 1c-7 0-12-2-18-5z'/%3E%3Cpath d='M37 32l8-13c2-4 7-4 9-1 1 2 1 4 0 6l-5 10'/%3E%3Cpath d='M49 34l7-16c2-4 7-4 9-1 1 2 1 4 0 6l-4 11'/%3E%3Cpath d='M61 34l5-13c2-4 7-4 9-1 1 2 1 4 0 6l-3 8'/%3E%3Cpath d='M75 33l4-8c2-4 7-4 9-1 1 2 1 4-1 7'/%3E%3Cpath d='M12 34l-5-5'/%3E%3Cpath d='M12 43l-6 4'/%3E%3C/g%3E%3C/svg%3E");
}
.ccz-prev::after{
  left:13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60' viewBox='0 0 100 60'%3E%3Cg transform='translate(100 0) scale(-1 1)' fill='none' stroke='%23553b28' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 34c10-2 17-3 25-2l21 2 19-1 13-5c4-1 7 1 7 4 0 2-2 4-5 5l-16 7-20 4-18 1c-7 0-12-2-18-5z'/%3E%3Cpath d='M37 32l8-13c2-4 7-4 9-1 1 2 1 4 0 6l-5 10'/%3E%3Cpath d='M49 34l7-16c2-4 7-4 9-1 1 2 1 4 0 6l-4 11'/%3E%3Cpath d='M61 34l5-13c2-4 7-4 9-1 1 2 1 4 0 6l-3 8'/%3E%3Cpath d='M75 33l4-8c2-4 7-4 9-1 1 2 1 4-1 7'/%3E%3Cpath d='M12 34l-5-5'/%3E%3Cpath d='M12 43l-6 4'/%3E%3C/g%3E%3C/svg%3E");
}

/* Beim Darüberfahren wird die Hand nur ein wenig lebendiger. */
.ccz-turn:not([disabled]):hover::after,
.ccz-turn:not([disabled]):focus-visible::after{
  opacity:.94;
  filter:sepia(.55) saturate(.82) brightness(.78) drop-shadow(0 0 4px rgba(204,157,75,.30));
}
.ccz-next:not([disabled]):hover::after,
.ccz-next:not([disabled]):focus-visible::after{
  transform:translateX(2px);
}
.ccz-prev:not([disabled]):hover::after,
.ccz-prev:not([disabled]):focus-visible::after{
  transform:translateX(-2px);
}

/* Die alte feine Ecklinie bleibt als zusätzliches, sehr dezentes Signal bestehen. */
.ccz-turn:not([disabled])::before{opacity:.30}
.ccz-turn[disabled]::after{display:none}


/* === 0.6.1: klassische Manicula statt der eigenwilligen Comic-Hand === */
.ccz-turn::after{
  width:58px;
  height:36px;
  bottom:13px;
  opacity:.66;
  filter:sepia(.78) saturate(.55) brightness(.58);
}
.ccz-next::after{
  right:11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='72' viewBox='0 0 116 72'%3E%3Cg fill='none' stroke='%234a3121' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 42l14-7 20 1 12-4 18-14c4-3 9-2 11 1 2 3 0 6-3 8L73 36l25-2c5 0 8 2 8 5 0 3-3 5-7 5l-28 2-15 9-20 2-17-5z'/%3E%3Cpath d='M45 36l7-15c2-5 8-6 11-2 2 2 1 5 0 8l-3 7'/%3E%3Cpath d='M56 33l5-13c2-5 8-5 11-2 2 3 1 6 0 8l-3 8'/%3E%3Cpath d='M68 34l4-10c2-4 7-5 10-2 2 2 2 5 0 8l-3 6'/%3E%3Cpath d='M13 42l-7-7v20l13-3'/%3E%3Cpath d='M10 38l8 14'/%3E%3Cpath d='M23 38c5 4 7 10 6 16'/%3E%3Cpath d='M73 36c4 1 6 4 7 8'/%3E%3C/g%3E%3C/svg%3E");
}
.ccz-prev::after{
  left:11px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='72' viewBox='0 0 116 72'%3E%3Cg transform='translate(116 0) scale(-1 1)' fill='none' stroke='%234a3121' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 42l14-7 20 1 12-4 18-14c4-3 9-2 11 1 2 3 0 6-3 8L73 36l25-2c5 0 8 2 8 5 0 3-3 5-7 5l-28 2-15 9-20 2-17-5z'/%3E%3Cpath d='M45 36l7-15c2-5 8-6 11-2 2 2 1 5 0 8l-3 7'/%3E%3Cpath d='M56 33l5-13c2-5 8-5 11-2 2 3 1 6 0 8l-3 8'/%3E%3Cpath d='M68 34l4-10c2-4 7-5 10-2 2 2 2 5 0 8l-3 6'/%3E%3Cpath d='M13 42l-7-7v20l13-3'/%3E%3Cpath d='M10 38l8 14'/%3E%3Cpath d='M23 38c5 4 7 10 6 16'/%3E%3Cpath d='M73 36c4 1 6 4 7 8'/%3E%3C/g%3E%3C/svg%3E");
}
.ccz-turn:not([disabled]):hover::after,
.ccz-turn:not([disabled]):focus-visible::after{
  opacity:.96;
  filter:sepia(.68) saturate(.68) brightness(.66) drop-shadow(0 0 3px rgba(193,145,64,.25));
}


/* === 0.6.2: eindeutige historische Zeigehand / Manicula === */
.ccz-turn::after{
  width:64px;
  height:34px;
  bottom:14px;
  opacity:.70;
  filter:sepia(.82) saturate(.52) brightness(.56);
}

/* Klarer langer Zeigefinger nach rechts, übrige Finger eingerollt,
   kleine historische Manschette. */
.ccz-next::after{
  right:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='68' viewBox='0 0 128 68'%3E%3Cg fill='none' stroke='%23452f20' stroke-width='3.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 42c8-5 15-8 23-8h20c7 0 12-1 18-4l13-7c4-2 8 0 9 3 1 3-1 6-5 8l-8 4 27 0c6 0 9 2 9 5s-3 5-9 5H82c-7 0-12 1-18 4l-11 6H35c-7 0-12-2-17-5z'/%3E%3Cpath d='M43 34l4-10c2-5 8-6 11-2 2 2 1 5 0 8l-2 4'/%3E%3Cpath d='M55 34l3-8c2-5 8-6 11-2 2 2 1 5 0 8l-1 3'/%3E%3Cpath d='M68 34l2-6c2-4 7-5 10-2 2 2 1 5 0 7l-1 2'/%3E%3Cpath d='M18 42L8 35v24l12-6'/%3E%3Cpath d='M11 39l7 16'/%3E%3Cpath d='M25 39c5 4 7 10 6 16'/%3E%3Cpath d='M88 38l7 0'/%3E%3C/g%3E%3C/svg%3E");
}

/* Exakt gespiegelt für zurück. */
.ccz-prev::after{
  left:10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='68' viewBox='0 0 128 68'%3E%3Cg transform='translate(128 0) scale(-1 1)' fill='none' stroke='%23452f20' stroke-width='3.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 42c8-5 15-8 23-8h20c7 0 12-1 18-4l13-7c4-2 8 0 9 3 1 3-1 6-5 8l-8 4 27 0c6 0 9 2 9 5s-3 5-9 5H82c-7 0-12 1-18 4l-11 6H35c-7 0-12-2-17-5z'/%3E%3Cpath d='M43 34l4-10c2-5 8-6 11-2 2 2 1 5 0 8l-2 4'/%3E%3Cpath d='M55 34l3-8c2-5 8-6 11-2 2 2 1 5 0 8l-1 3'/%3E%3Cpath d='M68 34l2-6c2-4 7-5 10-2 2 2 1 5 0 7l-1 2'/%3E%3Cpath d='M18 42L8 35v24l12-6'/%3E%3Cpath d='M11 39l7 16'/%3E%3Cpath d='M25 39c5 4 7 10 6 16'/%3E%3Cpath d='M88 38l7 0'/%3E%3C/g%3E%3C/svg%3E");
}

.ccz-turn:not([disabled]):hover::after,
.ccz-turn:not([disabled]):focus-visible::after{
  opacity:.98;
  filter:sepia(.70) saturate(.66) brightness(.64) drop-shadow(0 0 3px rgba(193,145,64,.24));
}

/* === 0.6.3: alte Holz-Wegweiser statt Zeigehände === */
.ccz-turn::after{
  width:78px;
  height:42px;
  bottom:10px;
  opacity:.86;
  filter:drop-shadow(0 2px 2px rgba(58,35,19,.20));
  background-size:contain;
}
.ccz-next::after{
  right:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='84' viewBox='0 0 156 84'%3E%3Cpath d='M7 16 Q9 10 16 11 L119 11 L149 42 L119 73 L16 73 Q9 74 7 68 Z' fill='%23936b3d' stroke='%23553a22' stroke-width='3'/%3E%3Cpath d='M15 18 C43 13 82 17 119 15 M17 65 C48 70 85 65 119 68' fill='none' stroke='%23c39a61' stroke-width='2' opacity='.42'/%3E%3Cpath d='M31 25 C54 22 81 26 106 23 M29 57 C54 54 81 59 108 55' fill='none' stroke='%236e4b2b' stroke-width='2' opacity='.38'/%3E%3Ccircle cx='20' cy='42' r='3.5' fill='%234b3422'/%3E%3Ccircle cx='116' cy='42' r='3.5' fill='%234b3422'/%3E%3Ctext x='68' y='49' text-anchor='middle' font-family='Georgia,serif' font-size='20' font-weight='700' fill='%233b291c'%3EWeiter%3C/text%3E%3C/svg%3E");
}
.ccz-prev::after{
  left:7px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='156' height='84' viewBox='0 0 156 84'%3E%3Cpath d='M149 16 Q147 10 140 11 L37 11 L7 42 L37 73 L140 73 Q147 74 149 68 Z' fill='%23936b3d' stroke='%23553a22' stroke-width='3'/%3E%3Cpath d='M141 18 C113 13 74 17 37 15 M139 65 C108 70 71 65 37 68' fill='none' stroke='%23c39a61' stroke-width='2' opacity='.42'/%3E%3Cpath d='M125 25 C102 22 75 26 50 23 M127 57 C102 54 75 59 48 55' fill='none' stroke='%236e4b2b' stroke-width='2' opacity='.38'/%3E%3Ccircle cx='136' cy='42' r='3.5' fill='%234b3422'/%3E%3Ccircle cx='40' cy='42' r='3.5' fill='%234b3422'/%3E%3Ctext x='88' y='49' text-anchor='middle' font-family='Georgia,serif' font-size='19' font-weight='700' fill='%233b291c'%3EZur%C3%BCck%3C/text%3E%3C/svg%3E");
}
.ccz-turn:not([disabled]):hover::after,
.ccz-turn:not([disabled]):focus-visible::after{
  opacity:1;
  filter:brightness(1.06) drop-shadow(0 3px 3px rgba(58,35,19,.26));
}
.ccz-next:not([disabled]):hover::after,
.ccz-next:not([disabled]):focus-visible::after{transform:translateX(2px)}
.ccz-prev:not([disabled]):hover::after,
.ccz-prev:not([disabled]):focus-visible::after{transform:translateX(-2px)}


/* === 0.6.4: unsichtbare Klickfläche – kein Theme-Hintergrund === */
.ccz-book-controls button.ccz-turn,
.ccz-book-controls button.ccz-turn:hover,
.ccz-book-controls button.ccz-turn:focus,
.ccz-book-controls button.ccz-turn:focus-visible,
.ccz-book-controls button.ccz-turn:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
}


/* === 1.0: fester Buchanfang + automatische Kapitelübersicht === */
.ccz-title-spread .ccz-page-inner,
.ccz-toc-spread .ccz-page-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ccz-title-spread .ccz-page-left .ccz-page-inner{
  text-align:center;
  align-items:center;
}
.ccz-title-spread h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1.08;
  color:#653813;
  margin:.25em 0;
}
.ccz-intro-star{font-size:2rem;color:#b68a45}
.ccz-intro-rule{width:55%;border-top:1px solid #b68a45;margin:18px auto}
.ccz-title-spread .ccz-page-right .ccz-page-inner{
  font-size:1.12rem;
}

/* Die Karte ist eine eigenständige Doppelseite mit stabiler Buchhöhe. */
.ccz-map-spread{
  min-height:620px;
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.20),transparent 30%),
    var(--ccz-paper);
}
.ccz-map-spread.is-active{
  display:block;
}
.ccz-map-canvas{
  box-sizing:border-box;
  width:100%;
  height:620px;
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ccz-map-canvas img{
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain;
  margin:0 !important;
}

/* Automatisch erzeugte Kapitelübersicht. */
.ccz-toc-spread h2{
  font-family:Georgia,"Times New Roman",serif;
  color:#653813;
  font-size:clamp(2rem,3vw,2.7rem);
  margin:0 0 .6em;
}
.ccz-toc-list{
  gap:8px;
  overflow:auto;
}
.ccz-toc-link{
  display:block;
  width:100%;
  margin:0 0 8px;
  padding:9px 12px;
  border:1px solid rgba(104,67,35,.34);
  border-radius:7px;
  background:rgba(255,248,224,.42);
  color:#4a2f1f;
  text-align:left;
  font-family:Georgia,"Times New Roman",serif;
  cursor:pointer;
}
.ccz-toc-link span{
  display:block;
  font-size:.78rem;
  opacity:.72;
}
.ccz-toc-link strong{
  display:block;
  font-size:1rem;
}
.ccz-toc-link:hover{
  background:rgba(255,248,224,.72);
}

/* Überschrift eines Kapitels innerhalb des Buches. */
.ccz-chapter-heading h2{
  font-family:Georgia,"Times New Roman",serif;
  color:#653813;
  margin-top:0;
}

@media(max-width:800px){
  .ccz-map-spread,
  .ccz-map-spread.is-active{min-height:0;display:block}
  .ccz-map-canvas{height:auto;padding:8px}
  .ccz-map-canvas img{width:100% !important;height:auto !important}
}


/* === 1.1: automatische Abschluss-Doppelseite je Duftkapitel === */
.ccz-ending-spread .ccz-page-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ccz-ending-left{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ccz-ending-image{
  display:block;
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain;
  border-radius:7px;
  box-shadow:0 4px 14px rgba(67,38,18,.22);
}
.ccz-ending-right{
  width:100%;
}
.ccz-ending-right h2{
  margin:0 0 14px;
  color:#653813;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.8rem;
}
.ccz-info-card{
  margin:0 0 10px;
  padding:10px 12px;
  border:1px solid rgba(104,67,35,.30);
  border-radius:7px;
  background:rgba(255,248,224,.38);
  color:#4a2f1f;
}
.ccz-info-card h3{
  margin:0 0 5px;
  color:#7a461d;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
}
.ccz-info-card div{
  line-height:1.45;
}
.ccz-insight-card{
  font-style:italic;
}
.ccz-shop-button{
  display:inline-block;
  margin-top:4px;
  padding:9px 14px;
  border:1px solid #9b632d;
  border-radius:7px;
  background:linear-gradient(#f7dfaa,#c9934d);
  color:#4a2f1f !important;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
  text-decoration:none !important;
  box-shadow:0 2px 5px rgba(67,38,18,.22);
}
.ccz-shop-button:hover{
  filter:brightness(1.04);
}


/* === 1.1.2: Kapitelbild am Anfang, Duftabschluss am Ende === */
.ccz-chapter-image-spread .ccz-page-inner{
  display:flex;
  align-items:center;
  justify-content:center;
}
.ccz-chapter-image-spread .ccz-ending-left{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ccz-chapter-image-spread .ccz-ending-image{
  display:block;
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain;
}


/* === 1.1.4: Kapitelbild links + Geschichtenbeginn rechts === */
.ccz-chapter-opening-spread .ccz-page-left .ccz-page-inner{
  display:flex;
  align-items:center;
  justify-content:center;
}
.ccz-chapter-opening-spread .ccz-ending-left{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ccz-chapter-opening-spread .ccz-ending-image{
  display:block;
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain;
  border-radius:7px;
  box-shadow:0 4px 14px rgba(67,38,18,.22);
}


/* === 1.1.5: Kapitelübersicht automatisch auf mehrere Doppelseiten verteilen === */
.ccz-toc-spread .ccz-toc-list{
  overflow: visible !important;
  max-height: none !important;
}
.ccz-toc-spread .ccz-toc-link{
  margin-bottom: 8px;
}


/* === 1.1.6: robustere Abschlussseite für lange Duftangaben === */

/* Linke Abschlussseite: Überschrift oben, Karten darunter über die volle Breite. */
.ccz-ending-spread .ccz-page-left .ccz-page-inner{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  gap:14px !important;
  padding-top:9% !important;
}

.ccz-ending-spread .ccz-page-left .ccz-ending-left{
  width:100% !important;
  height:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.25fr) !important;
  gap:14px !important;
  align-items:start !important;
}

/* Überschrift über beide Karten ziehen. */
.ccz-ending-spread .ccz-page-left .ccz-ending-left > h2{
  grid-column:1 / -1 !important;
  margin:0 0 4px !important;
  font-size:clamp(1.8rem,2.3vw,2.45rem) !important;
  line-height:1.08 !important;
}

/* Duftkarten bekommen Platz und sollen lange Wörter sauber umbrechen. */
.ccz-ending-spread .ccz-page-left .ccz-info-card{
  min-width:0 !important;
  width:auto !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

.ccz-ending-spread .ccz-page-left .ccz-info-card h3{
  margin-bottom:8px !important;
}

.ccz-ending-spread .ccz-page-left .ccz-info-card div{
  line-height:1.5 !important;
}

/* Auf schmaleren Ansichten Karten untereinander statt gequetscht. */
@media(max-width:900px){
  .ccz-ending-spread .ccz-page-left .ccz-ending-left{
    grid-template-columns:1fr !important;
  }
  .ccz-ending-spread .ccz-page-left .ccz-ending-left > h2{
    grid-column:1 !important;
  }
}


/* 1.1.7 – Hinweis unter dem Essenz-Button */
.ccz-essenz-hinweis{
  margin:14px 0 6px;
  line-height:1.55;
}
.ccz-essenz-yuki{
  margin:0;
  line-height:1.5;
}

/* === 1.1.8: variable Duft-Sets mit 1–5 Düften === */
.ccz-scent-card h4{
  margin:14px 0 6px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.98rem;
  color:#6a4932;
}
.ccz-scent-card h4:first-of-type{margin-top:8px}
.ccz-scent-card > div + h4{margin-top:16px}
.ccz-cards .ccz-scent-card h3{
  margin:14px 0 6px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1rem;
  color:#6a4932;
}


/* === 1.1.9: Set-Düfte werden als echte Buch-Doppelseiten gerendert === */
.ccz-ending-set .ccz-page-inner{
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  padding-top:9% !important;
}
.ccz-ending-set .ccz-ending-left,
.ccz-ending-set .ccz-ending-right{
  display:block !important;
  width:100% !important;
  height:auto !important;
}
.ccz-ending-set .ccz-set-scent-page{
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
.ccz-ending-set .ccz-set-kicker{
  margin:0 0 8px;
  color:#9a6b35;
  font-family:Georgia,"Times New Roman",serif;
  font-size:.88rem;
  font-style:italic;
  letter-spacing:.03em;
}
.ccz-ending-set .ccz-set-scent-page h2{
  margin:0 0 14px;
  color:#653813;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.55rem,2vw,2.05rem);
  line-height:1.08;
  overflow-wrap:anywhere;
}
.ccz-ending-set .ccz-info-card{
  margin:0 0 12px !important;
  padding:12px 14px !important;
  width:auto !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow-wrap:anywhere !important;
}
.ccz-ending-set .ccz-info-card h3{
  margin:0 0 7px;
  font-size:1.02rem;
}
.ccz-ending-set .ccz-info-card div{
  line-height:1.5;
}
.ccz-ending-set .ccz-set-finale{
  padding-top:6%;
}
.ccz-ending-set .ccz-set-finale-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  min-height:360px;
  color:#b98a45;
  font-size:4rem;
  opacity:.55;
}
/* Die alten Karten außerhalb des Buchs werden in 1.1.9 nicht mehr benötigt. */
.ccz-cards{display:none !important;}

/* === 1.1.10: konstante Buchhöhe beim Blättern === */
@media (min-width:801px){
  .ccz-book,
  .ccz-spread,
  .ccz-spread.is-active{
    height:620px;
    min-height:620px;
    max-height:620px;
  }

  .ccz-page,
  .ccz-gutter{
    height:620px;
    min-height:620px;
    max-height:620px;
  }

  .ccz-page-inner{
    height:620px;
    max-height:620px;
    overflow:hidden;
  }

  .ccz-map-spread,
  .ccz-map-spread.is-active,
  .ccz-map-canvas{
    height:620px;
    min-height:620px;
    max-height:620px;
  }
}

@media (max-width:800px){
  .ccz-book,
  .ccz-spread,
  .ccz-spread.is-active,
  .ccz-page,
  .ccz-gutter,
  .ccz-page-inner,
  .ccz-map-spread,
  .ccz-map-spread.is-active,
  .ccz-map-canvas{
    height:auto;
    min-height:0;
    max-height:none;
  }

  .ccz-page-inner{overflow:visible;}
}


/* === 1.1.11: konstante Buchbreite + saubere Set-Doppelseiten === */
@media (min-width:801px){
  /* Der äußere Buchkörper bleibt auf jeder Doppelseite exakt gleich breit. */
  .ccz-book-shell{
    width:min(1180px, calc(100vw - 36px)) !important;
    max-width:1180px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .ccz-book-frame,
  .ccz-book,
  .ccz-spread,
  .ccz-spread.is-active{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .ccz-spread,
  .ccz-spread.is-active{
    grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) !important;
  }

  /* Set-Doppelseiten: genau EIN Duft pro Buchseite. */
  .ccz-ending-set-spread .ccz-page-inner{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    align-items:stretch !important;
    padding:48px 52px 58px !important;
    overflow:hidden !important;
  }
  .ccz-ending-set-spread .ccz-ending-left,
  .ccz-ending-set-spread .ccz-ending-right{
    display:block !important;
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
  }
  .ccz-ending-set-spread .ccz-set-scent-page{
    width:100% !important;
    min-width:0 !important;
  }
  .ccz-ending-set-spread .ccz-set-kicker{
    margin:0 0 7px !important;
    color:#9a6b35 !important;
    font-size:.84rem !important;
    font-style:italic !important;
  }
  .ccz-ending-set-spread .ccz-set-scent-page h2{
    margin:0 0 18px !important;
    font-size:clamp(1.45rem,2vw,1.95rem) !important;
    line-height:1.12 !important;
    color:#653813 !important;
    overflow-wrap:anywhere !important;
  }
  .ccz-ending-set-spread .ccz-info-card{
    margin:0 0 16px !important;
    padding:12px 14px !important;
    border:1px solid rgba(104,67,35,.24) !important;
    background:rgba(255,248,224,.24) !important;
    border-radius:7px !important;
    box-sizing:border-box !important;
    overflow-wrap:anywhere !important;
  }
  .ccz-ending-set-spread .ccz-info-card h3{
    margin:0 0 7px !important;
    font-size:1.02rem !important;
  }
  .ccz-ending-set-spread .ccz-info-card div{
    line-height:1.48 !important;
  }
  .ccz-ending-set-spread .ccz-set-finale{
    padding-top:8% !important;
  }

  /* Alte generische Set-Regeln dürfen die gerenderten Seiten nicht mehr zusammendrücken. */
  .ccz-ending-set-spread .ccz-page-left .ccz-ending-left,
  .ccz-ending-set-spread .ccz-page-right .ccz-ending-right{
    grid-template-columns:none !important;
    gap:0 !important;
  }
}
