/* Bubble-Letters-Seiten (2026-10-06): /bubble-letters/, /alphabet/, /numbers/, /<a-z>/, /how-to-draw-bubble-letters/.
   Nur der Seitenteil; die Engine bringt cc-bubble.css mit. Farben wie style.css, Hubs und /draw/:
   #fb9e43 (orange), #ea580c / #c2410c (Knoepfe), #fff7ed + #f3d3b8 (hell), #e9e4dc (Kartenrand). */
.bub-page{padding:30px 0 60px}
.bub-page h1.title{margin:0 0 4px;line-height:1.4}
.bub-intro{max-width:72ch;color:#444;line-height:1.6;margin:0 0 18px!important}
.bub-page .ccb-wrap{width:100%;margin:0 0 40px}
.bub-noscript{padding:16px;border:2px dashed #f3d3b8;border-radius:12px;background:#fff7ed;color:#7c2d12;margin:0!important}
.bub-page figure{margin:0}

/* Fliesstext: Text schmal, Galerien in voller Breite */
.bub-text h2{margin:34px 0 12px}
.bub-text h3{font-size:19px;line-height:27px;color:#1d1d1d;margin:22px 0 6px}
.bub-text p,.bub-text ul,.bub-text ol,.bub-text h2,.bub-text h3,.bub-text table,.bub-tip,.bub-faq{max-width:831px}
.bub-text p{color:#444;line-height:1.7;margin:0 0 16px}
.bub-text a{color:#c2410c;font-weight:600}
.bub-text ol,.bub-text ul{margin:0 0 20px;padding-left:26px}
.bub-text ol li{list-style:decimal;margin:0 0 6px!important;text-indent:0;padding-left:4px}
.bub-text ul li{list-style:disc;margin:0 0 6px!important;text-indent:0;padding-left:2px;color:#444;line-height:1.6}
.bub-text ul li:before{content:none;display:none}
/* Die Texte aus bubble_content/*_body.html stecken in <section class="ccb-sec">; cc-bubble.css gibt .ccb-sec
   (Bedienfeld der Engine) Innenabstand und Trennlinie -> im Fliesstext zuruecksetzen. */
.bub-text section.ccb-sec{padding:0;border-bottom:0}
.bub-tip{color:#444;line-height:1.7;margin:0 0 16px}
.bub-tip p{margin:0 0 12px}

/* Abschnitte und Galerien */
.bub-sec{margin-top:40px}
.bub-sec>h2{margin:0 0 14px}
.bub-h3{font-size:19px;line-height:27px;color:#1d1d1d;margin:28px 0 12px}
.bub-grid{display:grid;gap:14px}
.bub-grid-az{grid-template-columns:repeat(9,1fr)}
.bub-grid-num{grid-template-columns:repeat(5,1fr)}
.bub-tile{display:block;min-width:0;background:#fff;border:1px solid #e9e4dc;border-radius:12px;overflow:hidden;text-decoration:none;color:#1f2937;text-align:center}
.bub-tile img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff}
.bub-tile span,.bub-tile figcaption{display:block;padding:5px 4px 7px;font-weight:700;font-size:16px;line-height:20px;border-top:1px solid #f1ede6}
a.bub-tile:hover{border-color:#fb9e43;color:#ea580c}
.bub-card{background:#fff;border:1px solid #e9e4dc;border-radius:12px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
.bub-card h3{margin:0;padding:10px 12px 0;font-size:16px;line-height:22px;color:#1f2937}
.bub-styles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.bub-pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 10px}
.bub-pair img,.bub-steps img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff}
.bub-sheets{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.bub-sheets-2{grid-template-columns:repeat(4,1fr)}
.bub-sheet-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 12px 12px}
.bub-sheet img{display:block;width:100%;height:auto;aspect-ratio:1100/850;object-fit:contain;background:#fff;border:1px solid #f1ede6;border-radius:8px}
.bub-sheet figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 0 0;color:#555;font-size:14px}
figure.bub-sheet{padding:10px 12px 12px}
.bub-page .ccb-use{border:0;cursor:pointer;font-family:inherit;background:#ea580c;color:#fff;font-weight:700;font-size:14px;line-height:20px;padding:7px 14px;border-radius:8px}
.bub-page .ccb-use:hover{background:#c2410c}
.bub-style .ccb-use{margin:auto 10px 10px}
.bub-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}
.bub-step{background:#fff;border:1px solid #e9e4dc;border-radius:12px;overflow:hidden;min-width:0}
.bub-text>.bub-step,.bub-text .bub-step:only-child{max-width:420px;margin:6px 0 22px}
.bub-step img{display:block;width:100%;height:auto;background:#fff}
.bub-step figcaption{padding:7px 10px 9px;border-top:1px solid #f1ede6;color:#1f2937;font-weight:600;font-size:14px;line-height:20px}

/* Woerter, Namen, Weiter-Links */
.bub-chips,.bub-more div{display:flex;flex-wrap:wrap;gap:8px}
.bub-chips a,.bub-chips span,.bub-more a{font-size:15px;line-height:22px;padding:6px 14px;border:1px solid #f3d3b8;border-radius:999px;color:#9a3412;text-decoration:none;background:#fff7ed;font-weight:400}
.bub-chips span{color:#444;background:#fff;border-color:#e9e4dc}
.bub-chips a:hover,.bub-more a:hover{border-color:#fb9e43;color:#ea580c}
.bub-ideas li b{color:#1f2937}
.bub-coloring{margin:28px 0 0!important}
.bub-coloring a{display:inline-block;background:#ea580c;color:#fff;font-weight:700;padding:10px 18px;border-radius:8px;text-decoration:none}
.bub-coloring a:hover{background:#c2410c}
.bub-faq h3{font-size:18px;line-height:26px;color:#1d1d1d;margin:22px 0 6px}
.bub-faq-a{color:#444;line-height:1.7}
.bub-faq-a p{margin:0 0 10px}
.bub-pn{display:flex;justify-content:space-between;gap:12px;margin:40px 0 14px}
.bub-pn a{color:#c2410c;font-weight:700;text-decoration:none}
.bub-pn a:hover{text-decoration:underline}
.bub-az{display:flex;flex-wrap:wrap;gap:6px}
.bub-az a{min-width:38px;text-align:center;padding:6px 0;border:1px solid #f3d3b8;border-radius:8px;color:#9a3412;background:#fff7ed;font-weight:700;text-decoration:none;line-height:22px}
.bub-az a:hover{border-color:#fb9e43;color:#ea580c}
.bub-az a.on{background:#ea580c;border-color:#ea580c;color:#fff}
.bub-more{margin-top:44px}
.bub-more h2{font-size:22px;line-height:30px;margin:0 0 14px}

@media (max-width:900px){
  .bub-grid-az{grid-template-columns:repeat(6,1fr)}
  .bub-styles{grid-template-columns:repeat(2,1fr)}
  .bub-sheets{grid-template-columns:1fr}
  .bub-sheets-2{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .bub-page{padding:16px 0 40px}
  .bub-page h1.title{font-size:34px}
  .bub-grid{gap:8px}
  .bub-grid-az{grid-template-columns:repeat(4,1fr)}
  .bub-styles,.bub-sheets-2{grid-template-columns:1fr 1fr;gap:10px}
  .bub-sheet-pair{grid-template-columns:1fr}
  .bub-steps{grid-template-columns:repeat(2,1fr);gap:10px}
  .bub-pair{padding:6px}
  .bub-card h3{padding:8px 9px 0;font-size:15px}
  .bub-style .ccb-use{margin:auto 8px 8px}
  .bub-tile span,.bub-tile figcaption{font-size:14px;padding:3px 2px 5px}
}