/* Ratgeber-/Malbuch-Seiten (2026-10-07, Design v2): /benefits-of-coloring/, /free-coloring-books/, /free-coloring-books/<saison>/.
   Mobil zuerst, wenig Text, Illustrationen (Wachsmalstift, GPT-Image-2.5) statt Emojis, viel Luft. */
@font-face{font-family:'CCFredoka';src:url('/static/assets/fonts/fredoka-var-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}
.ccp{--o1:#fb9e43;--o2:#ea580c;--o3:#c2410c;--cream:#fff8ef;--cream2:#fff1e0;--line:#efe7db;--ink:#1f2937;--ink2:#374151;--mut:#6b7280;
  --r:22px;--sh:0 1px 2px rgba(120,72,20,.05),0 6px 18px rgba(120,72,20,.07);--gap:48px;color:var(--ink);padding-bottom:40px}
.ccp *{box-sizing:border-box}
/* globale style.css: li{margin-left:30px!important;text-indent:-30px}, ul li:before = orange Punkt, ul{margin-bottom:30px}, header{position:absolute} */
.ccp ul,.ccp ol{margin:0;padding:0}
.ccp li{margin-left:0!important;text-indent:0;list-style:none}
.ccp ul li:before,.ccp ol li:before{content:none;display:none}
.ccp h2,.ccp h3{font-family:CCFredoka,Inter,system-ui,sans-serif;letter-spacing:-.005em}
.ccp img{max-width:100%}
.ccp a{text-underline-offset:3px}

/* ---------- Kopf mit Titelbild ---------- */
.ccp-hero{display:flex;flex-direction:column;gap:6px;margin:4px 0 0}
.ccp-hero-art{order:-1;margin:0 -8px}
.ccp-hero-art img{display:block;width:100%;height:auto;aspect-ratio:3/2}
.ccp-hero .title{margin:0 0 6px;line-height:1.15}
.ccp-sub{font:600 1.12rem/1.45 CCFredoka,Inter,sans-serif;color:var(--ink2);margin:0 0 12px}
.ccp-by{font-size:.84rem;color:var(--mut);margin:0}
.ccp-by b{color:var(--ink2);font-weight:600}
.ccp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.ccp-chips li{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);color:var(--ink2);font:600 .84rem/1 Inter,sans-serif;padding:8px 12px;border-radius:999px}
.ccp-chips li::after{content:none}
.ccp-chips i{width:9px;height:9px;border-radius:50%;background:var(--o1);display:block;flex:none}
.ccp-chips li:nth-child(4n+2) i{background:#60a5fa}.ccp-chips li:nth-child(4n+3) i{background:#34d399}.ccp-chips li:nth-child(4n+4) i{background:#f472b6}

/* ---------- Abschnitte ---------- */
.ccp-sec{margin:var(--gap) 0 0}
.ccp-h2{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.ccp-h2 img{width:58px;height:58px;flex:none}
.ccp-h2 h2,.ccp-sec>h2{font-size:1.55rem;line-height:1.2;margin:0;color:var(--o2)}
.ccp-h2 p{margin:4px 0 0;color:var(--mut);font-size:.95rem;line-height:1.4}
.ccp-lead{margin:-6px 0 18px;color:#4b5563;line-height:1.5}
.ccp-band{background:var(--cream);border-radius:28px;padding:28px 16px;margin-left:-8px;margin-right:-8px}

/* Sprung-Leiste */
.ccp-jump{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:22px -16px 0;padding:4px 16px 8px;-webkit-overflow-scrolling:touch}
.ccp-jump::-webkit-scrollbar{display:none}
.ccp-jump a{flex:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;border:1.5px solid var(--line);background:#fff;color:var(--ink2);
  font-weight:600;font-size:.92rem;padding:5px 15px 5px 5px;border-radius:999px;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.ccp-jump a img{width:34px;height:34px}
.ccp-jump a:hover{border-color:#f6c99b;background:var(--cream)}

/* Kurze Antwort */
.ccp-answer{background:var(--cream);border-radius:var(--r);padding:20px 18px 16px;margin-top:22px;position:relative}
.ccp-answer-k{font:700 .76rem/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--o3);margin:0 0 10px}
.ccp-answer-t{font-size:1.04rem;line-height:1.6;margin:0 0 14px;color:var(--ink)}
.ccp-legend{display:flex;flex-wrap:wrap;gap:6px}

/* Beleg-Abzeichen */
.ccp-ev{display:inline-flex;align-items:center;gap:6px;font:700 .75rem/1 Inter,sans-serif;padding:6px 10px;border-radius:999px;white-space:nowrap}
.ccp-ev-good{background:#dcfce7;color:#166534}.ccp-ev-some{background:#e0f2fe;color:#075985}
.ccp-ev-early{background:#fef3c7;color:#92400e}.ccp-ev-expert{background:#ede9fe;color:#5b21b6}
.ccp-dots{display:inline-flex;gap:2px}
.ccp-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.22;display:block}
.ccp-dots i.on{opacity:1}
.ccp-dots i.star{width:8px;height:8px;opacity:1;border-radius:2px;transform:rotate(45deg)}

/* Nutzen-Karten */
.ccp-cards{display:grid;grid-template-columns:1fr;gap:14px}
.ccp-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 14px;box-shadow:var(--sh)}
.ccp-card .ccp-ico{width:76px;height:76px;flex:none;margin:-2px 0 0 -4px}
.ccp-card-body{min-width:0;flex:1}
.ccp-card h3{font-size:1.1rem;line-height:1.3;margin:2px 0 6px;color:var(--ink)}
.ccp-n{color:var(--o1);margin-right:2px}
.ccp-card p{margin:0;font-size:.96rem;line-height:1.5;color:var(--ink2)}
.ccp-tip{margin:8px 0 0!important;font-size:.92rem!important}
.ccp-tip a{color:var(--o3);font-weight:700}
.ccp-card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:12px 0 0!important}
.ccp-ref{font:600 .74rem/1 Inter,sans-serif;color:var(--mut);text-decoration:none;padding:5px 3px}
.ccp-ref:hover{color:var(--o3);text-decoration:underline}

/* Bild-Leiste */
.ccp-strip{margin:22px 0 0}
.ccp-strip-t{font:700 1rem/1.2 CCFredoka,Inter,sans-serif;margin:0 0 10px;color:var(--ink2)}
.ccp-strip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ccp-pic{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--sh)}
.ccp-pic img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#fff;padding:6px}
.ccp-pic span{display:block;font-size:.8rem;font-weight:600;padding:8px 9px 9px;line-height:1.25;border-top:1px solid #f4eee6}

/* Kaesten */
.ccp-box{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r);padding:20px 18px;background:#eef6ff}
.ccp-box img{width:84px;height:84px;flex:none;margin:-4px 0 0 -4px}
.ccp-box h2{font-size:1.35rem;margin:0 0 8px;color:#1e3a8a}
.ccp-box p{margin:0;line-height:1.55;color:#1f2a44}
.ccp-box .ccp-ref{color:#3b5b9a}

/* Mythen */
.ccp-myths{display:grid;gap:12px}
.ccp-myths li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.ccp-myth,.ccp-truth{display:flex;gap:10px;align-items:flex-start;margin:0}
.ccp-myth{font-weight:700;color:#9f1239;margin-bottom:10px}
.ccp-myth span{text-decoration:line-through;text-decoration-color:rgba(159,18,57,.35);text-decoration-thickness:2px}
.ccp-truth{color:var(--ink2);line-height:1.5}
.ccp-mark{width:24px;height:24px;flex:none;margin-top:-1px}

/* Schritte */
.ccp-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ccp-steps li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 12px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:var(--sh);position:relative}
.ccp-steps img{width:76px;height:76px;margin-bottom:4px}
.ccp-steps b{font:700 1rem/1.25 CCFredoka,Inter,sans-serif;color:var(--ink)}
.ccp-steps span{font-size:.86rem;line-height:1.4;color:var(--mut)}
.ccp-steps .ccp-num{position:absolute;top:10px;left:12px;font:700 .8rem/1 CCFredoka,Inter,sans-serif;color:var(--o1)}
.ccp-cta{display:flex;flex-direction:column;gap:10px;margin:18px 0 0}
.ccp-btn{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--o2);color:#fff!important;font-weight:700;text-decoration:none;border-radius:16px;padding:14px 18px;font-size:1.02rem;box-shadow:0 4px 12px rgba(234,88,12,.25)}
.ccp-btn img{width:36px;height:36px;margin:-6px 0}
.ccp-btn:hover{background:var(--o3)}
.ccp-btn-2{background:#fff;color:var(--o3)!important;border:2px solid #f6c99b;box-shadow:none}
.ccp-btn-2:hover{background:var(--cream)}

/* Infografik */
.ccp-info{margin:var(--gap) auto 0;max-width:300px;text-align:center}
.ccp-info img{width:100%;height:auto;border-radius:20px;box-shadow:0 8px 26px rgba(120,72,20,.12)}
.ccp-info figcaption{font-size:.82rem;color:var(--mut);margin-top:10px}

/* FAQ */
.ccp-faq{display:grid;gap:10px}
.ccp-faq details{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.ccp-faq summary{list-style:none;cursor:pointer;padding:16px 50px 16px 16px;position:relative}
.ccp-faq summary::-webkit-details-marker{display:none}
.ccp-faq summary::after{content:'';position:absolute;right:16px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--cream2)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23ea580c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .2s}
.ccp-faq details[open] summary::after{transform:rotate(180deg)}
.ccp-faq summary h3{display:inline;font-size:1.02rem;line-height:1.4;margin:0;color:var(--ink)}
.ccp-faq details p{margin:0;padding:0 16px 16px;line-height:1.6;color:var(--ink2)}

/* Quellen */
.ccp-src summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px}
.ccp-src summary::-webkit-details-marker{display:none}
.ccp-src summary img{width:52px;height:52px}
.ccp-src summary h2{display:inline;font-size:1.1rem;color:var(--ink2)}
.ccp-src summary::after{content:'';width:20px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23ea580c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.ccp-src ol{margin:14px 0 0;padding-left:22px;font-size:.88rem;line-height:1.55}
.ccp-src li{margin:0 0 6px;list-style:decimal}
.ccp-src a{color:var(--ink2)}
.ccp-note{font-size:.8rem;color:var(--mut);margin:14px 0 0;line-height:1.5}

/* ---------- Malbuecher ---------- */
.ccp-how{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0 0}
.ccp-how li{background:var(--cream);border-radius:20px;padding:12px 6px 14px;text-align:center;display:flex;flex-direction:column;gap:2px;align-items:center}
.ccp-how img{width:64px;height:64px;margin-bottom:2px}
.ccp-how b{font:700 .92rem/1.2 CCFredoka,Inter,sans-serif}
.ccp-how small{font-size:.76rem;line-height:1.3;color:var(--mut)}
.ccp-shelf{margin:var(--gap) 0 0}
.ccp-books-row{margin:0 -16px;padding:6px 16px 14px;display:grid;grid-auto-flow:column;grid-auto-columns:43%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.ccp-book{scroll-snap-align:start;display:flex;flex-direction:column;min-width:0}
.ccp-cover{position:relative;display:block;aspect-ratio:3/4;background:#fff;border:1px solid #e9dfd1;border-radius:6px 16px 16px 6px;overflow:hidden;
  box-shadow:inset 8px 0 0 var(--spine,#fdba74),inset 10px 0 0 rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.05),0 10px 22px rgba(120,72,20,.10);text-decoration:none;transition:transform .15s}
.ccp-cover:hover{transform:translateY(-2px) rotate(-.4deg)}
.ccp-cover img{position:absolute;left:13%;right:5%;top:23%;width:82%;height:64%;object-fit:contain;background:#fff}
.ccp-collage{position:absolute;left:12%;right:5%;top:22%;bottom:11%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:5px}
.ccp-collage img{position:static;width:100%;height:100%;object-fit:contain;background:#fff;border:1px solid #f1ebe2;border-radius:6px}
.ccp-cover-band{position:absolute;left:0;right:0;top:0;height:19%;display:flex;align-items:center;justify-content:center;padding:0 8px 0 16px;
  font:700 clamp(.88rem,4.2vw,1.15rem)/1.05 CCFredoka,Inter,sans-serif;color:#fff;background:var(--band,#fb9e43);text-align:center;text-shadow:0 1px 0 rgba(0,0,0,.12)}
.ccp-book:nth-child(4n+2){--band:#60a5fa;--spine:#93c5fd}.ccp-book:nth-child(4n+3){--band:#34d399;--spine:#6ee7b7}.ccp-book:nth-child(4n+4){--band:#f472b6;--spine:#f9a8d4}
.ccp-cover-n{position:absolute;right:8px;bottom:8px;background:rgba(17,24,39,.8);color:#fff;font:700 .7rem/1 Inter,sans-serif;padding:5px 8px;border-radius:999px}
.ccp-book h3{font:600 .9rem/1.3 Inter,system-ui,sans-serif;margin:10px 2px 8px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.ccp-dl{margin-top:auto;display:flex;align-items:center;justify-content:center;width:100%;border:0;border-radius:12px;background:var(--o2);color:#fff;font:700 .9rem/1 Inter,sans-serif;padding:12px 8px;cursor:pointer;min-height:44px;box-shadow:0 3px 8px rgba(234,88,12,.22)}
.ccp-dl:hover{background:var(--o3)}
.ccp-dl[disabled]{opacity:.85;cursor:wait}
.ccp-more{margin:6px 0 0;font-size:.95rem;display:flex;flex-wrap:wrap;gap:6px 18px}
.ccp-more a{color:var(--o3);font-weight:700}
.ccp-tips{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ccp-tips li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 12px;font-size:.88rem;line-height:1.4;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;box-shadow:var(--sh);color:var(--ink2)}
.ccp-tips img{width:64px;height:64px}
.ccp-ext-h{display:flex;align-items:center;gap:10px;font-size:1.08rem;margin:26px 0 10px;color:var(--ink2)}
.ccp-ext-h img{width:44px;height:44px}
.ccp-ext{margin:0 -16px!important;padding:2px 16px 10px!important;display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.ccp-ext li{scroll-snap-align:start;display:flex}
.ccp-ext li a{flex:1}
.ccp-ext a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto 1fr;grid-template-areas:"n e" "i i" "c c";gap:3px 8px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px 15px;text-decoration:none;color:var(--ink);box-shadow:var(--sh)}
.ccp-ext a:hover{border-color:#f6c99b}
.ccp-ext b{grid-area:n;font-size:.98rem;line-height:1.3}
.ccp-ext small{grid-area:i;color:var(--mut);font-size:.78rem}
.ccp-ext span{grid-area:c;font-size:.88rem;color:var(--ink2);line-height:1.4;margin-top:4px}
.ccp-ext em{grid-area:e;font-style:normal;font:700 .72rem/1.7 Inter,sans-serif;color:var(--o3);white-space:nowrap;text-align:right}
.ccp-about{margin:var(--gap) 0 0;font-size:.92rem;line-height:1.6;color:#4b5563}
.ccp-about a{color:var(--o3);font-weight:700;white-space:nowrap}

/* Sammelbuch (Saison-Seite) */
.ccp-mega{display:grid;grid-template-columns:44% 1fr;gap:16px;align-items:center;background:var(--cream);border-radius:28px;padding:18px;margin:26px -8px 0}
.ccp-mega .ccp-cover{--band:#7c3aed;--spine:#c4b5fd}
.ccp-mega h2{font-size:1.3rem;line-height:1.2;margin:0 0 6px;color:var(--ink)}
.ccp-mega p{margin:0 0 12px;font-size:.92rem;line-height:1.45;color:var(--ink2)}
.ccp-mega .ccp-dl{font-size:.95rem}

@media (min-width:700px){
  .ccp{--gap:68px}
  .ccp-hero{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:28px;margin-top:8px}
  .ccp-hero-art{order:0;margin:0}
  .ccp-sub{font-size:1.25rem}
  .ccp-h2 img{width:68px;height:68px}
  .ccp-h2 h2,.ccp-sec>h2{font-size:1.9rem}
  .ccp-band{padding:40px 36px;margin-left:0;margin-right:0}
  .ccp-cards{grid-template-columns:1fr 1fr;gap:18px}
  .ccp-myths{grid-template-columns:repeat(3,1fr)}
  .ccp-steps{grid-template-columns:repeat(4,1fr);gap:16px}
  .ccp-cta{flex-direction:row}.ccp-cta .ccp-btn{flex:1}
  .ccp-jump{margin:26px 0 0;padding:4px 0 8px;flex-wrap:wrap}
  .ccp-books-row{margin:0;padding:6px 0 14px;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;overflow:visible;gap:22px}
  .ccp-ext{margin:0!important;padding:0!important;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr;overflow:visible;gap:14px}
  .ccp-tips{grid-template-columns:repeat(4,1fr);gap:16px}
  .ccp-strip{max-width:760px}.ccp-strip-row{gap:14px}
  .ccp-info{max-width:420px}
  .ccp-answer{padding:26px 28px 22px}
  .ccp-mega{grid-template-columns:240px 1fr;gap:32px;padding:28px 36px;margin:30px 0 0}
  .ccp-mega h2{font-size:1.7rem}
  .ccp-mega .ccp-dl{max-width:280px}
}
@media (min-width:1100px){
  .ccp-cards{grid-template-columns:repeat(3,1fr);gap:20px}
  .ccp-books-row{grid-template-columns:repeat(6,1fr)}
  .ccp-cover-band{font-size:1.02rem}
  .ccp-ext{grid-template-columns:repeat(3,1fr)}
  .ccp-hero{grid-template-columns:1fr 1fr;gap:44px}
}

/* ---------- Design v2.1 (07.10.2026 spaet): Werbeplaetze nur zwischen Abschnitten, ruhigere Abstaende ---------- */
.ccp-adanchor{margin:var(--gap) auto 0;max-width:640px;text-align:center;font-size:.86rem;line-height:1.5;color:var(--mut);padding:0 12px}
.ccp-adanchor + .ccp-shelf,.ccp-adanchor + .ccp-sec{margin-top:28px}
.ccp-mega-pages{display:none}
.ccp-h2{margin-bottom:18px}
.ccp-h2 > div{min-width:0}
.ccp-faq,.ccp-src{max-width:880px}
.ccp-about{max-width:760px}
.ccp-shelf .ccp-more{margin-top:10px}
@media (min-width:700px){
  .ccp-hero{grid-template-columns:1.1fr .9fr}
  .ccp-chips{gap:6px}
  .ccp-chips li{font-size:.8rem;padding:7px 11px}
  .ccp-h2 p{font-size:1rem;max-width:620px}
  .ccp-mega{grid-template-columns:210px minmax(220px,300px) 1fr;align-items:center}
  .ccp-mega-pages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .ccp-mega-pages li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:var(--sh)}
  .ccp-mega-pages img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
  .ccp-tips li{font-size:.95rem;padding:18px 16px}
  .ccp-tips img{width:76px;height:76px}
  .ccp-book h3{font-size:.92rem}
  .ccp-adanchor{font-size:.9rem}
  .ccp-sec>.ccp-more,.ccp-more.ccp-sec{margin-top:40px}
}
@media (min-width:1100px){
  .ccp-mega{grid-template-columns:220px 300px 1fr;gap:36px}
  .ccp-mega-pages{grid-template-columns:repeat(3,1fr);max-width:520px}
}

/* v2.2 (07.10.2026): jedes Buch ist eine Karte (Cover + Titel + Knopf gehoeren sichtbar zusammen), mehr Abstand zwischen den Reihen */
.ccp-book{background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px 10px 12px;box-shadow:var(--sh)}
.ccp-book .ccp-cover{box-shadow:inset 8px 0 0 var(--spine,#fdba74),inset 10px 0 0 rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.06);border-radius:5px 14px 14px 5px}
.ccp-book h3{margin:10px 2px 10px}
.ccp-books-row{padding-top:8px;padding-bottom:18px}
@media (min-width:700px){
  .ccp-books-row{column-gap:18px;row-gap:34px}
  .ccp-book{padding:12px 12px 14px}
}
@media print{.ccp-jump,.ccp-dl,.ccp-cta{display:none!important}}