/* GR4AI-Guide: gemeinsames Aussehen aller sechs Sprachfassungen (seit 30.10.2026). Ändern: nur hier. */
  :root{
    --bg:        #F7FFF7;
    --bg-deep:   #D5E2EC;
    --ink:       #15171A;
    --ink-soft:  #4A5159;
    --paper:     #FFFFFF;
    --pink:      #FF6B6B;
    --green:     #4ECDC4;
    --purple:    #292F36;
    --yellow:    #FFE66D;
    --blue:      #4ECDC4;
    --orange:    #FFE66D;
    --teal:      #4ECDC4;
    --jet:       #292F36;
    --cyan:      #4ECDC4;
    --mint:      #F7FFF7;
    --coral:     #FF6B6B;
    --gold:      #FFE66D;
    --quiz-green: #17A551;
    --quiz-red:   #E23434;
    --radius:    22px;
  }

  *,*::before,*::after{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 21px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  ::selection{ background: var(--yellow); color: var(--ink); }
  img{ display:block; max-width:100%; height:auto; }
  a{ color: inherit; }
  .wrap{ max-width: 1180px; margin: 0 auto; padding: 0 24px; }

  /* ---------- Journey line ---------- */
  main{ position: relative; isolation: isolate; }
  .journey-wrap{ position: relative; isolation: isolate; }
  .guide-line{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
  }
  .guide-line .path{
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.5;
    stroke-dasharray: 5 9;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0.7;
    animation: journey-flow 1.4s linear infinite;
  }
  @keyframes journey-flow{ to { stroke-dashoffset: -14; } }
  @media (prefers-reduced-motion: reduce){ .guide-line .path{ animation: none; } }
  @media (max-width: 800px){ .guide-line{ display: none; } }
  section > .wrap{ position: relative; z-index: 2; }

  /* ---------- Header ---------- */
  header.site{
    padding: 22px 0 0;
    position: sticky; top: 0; z-index: 50;
    background: rgba(229,238,245,0.85);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(20,23,26,0.08);
  }
  .brand{
    display:inline-flex; align-items:center; gap:12px;
    font-family: "Fraunces", serif;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: -0.01em;
    text-decoration: none;
    color: inherit;
  }
  .brand .dot{
    /* Das Gesicht der KI-Wolke, dasselbe Bild wie das Tab-Symbol */
    width: 34px; height: 34px; flex: none;
    background: url("favicon-192.png") center / contain no-repeat;
  }
  .menu{ display:flex; gap: 26px; align-items:center; }
  .menu a{
    font-size: 14px; color: var(--ink-soft);
    text-decoration: none; font-weight: 500;
  }
  .menu a:hover{ color: var(--ink); }
  .menu a.back{
    display:inline-flex; align-items:center; gap:8px;
    color: var(--ink); font-weight: 700;
  }
  @media (max-width: 760px){ .menu .chapter-links{ display:none; } }
  .chapter-links{ display: flex; gap: 4px; }
  .chapter-links a{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    font-size: 13px;
    transition: font-weight .15s ease, color .15s ease;
  }
  .chapter-links a.is-active{
    font-weight: 800;
    color: var(--ink);
  }
  .chapter-links a.is-active::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    z-index: -1;
  }
  .lang-switch{
    display:inline-flex; align-items:center; gap:2px;
    padding: 3px; border-radius: 999px;
    background: var(--paper);
    border: 1px solid rgba(20,23,26,0.10);
  }
  .lang-switch a{
    display:inline-flex; align-items:center; justify-content:center;
    min-width: 34px; padding: 3px 9px;
    border-radius: 999px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
    color: var(--ink-soft); text-decoration: none;
  }
  .lang-switch a:hover{ color: var(--ink); }
  .lang-switch a[aria-current="true"]{
    background: var(--yellow); color: var(--ink);
    box-shadow: 0 1px 0 rgba(20,23,26,0.12);
  }
  @media (max-width: 420px){ .lang-switch a{ min-width: 30px; padding: 3px 7px; } }

  .hashtag{
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--ink-soft);
    padding: 6px 12px; border-radius: 999px;
    background: var(--paper);
    border: 1px solid rgba(20,23,26,0.08);
  }

  /* ---------- Section scaffolding ---------- */
  section{ padding: 110px 0; }
  .kicker{
    font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-soft);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .kicker::before{
    content: ""; display:inline-block; width: 22px; height: 2px; background: var(--ink);
  }
  h2{
    font-family: "Fraunces", serif;
    font-weight: 900;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 12px 0 0;
  }
  .intro{ margin: 14px 0 0; color: var(--ink-soft); font-size: 18.5px; max-width: 60ch; }

  /* ---------- Guide hero ---------- */
  .guide-hero{ position: relative; padding: 56px 0 24px; text-align: center; overflow: hidden; }
  .guide-hero-bg{
    position: absolute;
    top: 6%;
    left: 8%;
    width: 42%;
    max-width: 560px;
    height: auto;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
    animation: hero-float 30s ease-in-out infinite;
  }
  @keyframes hero-float{
    0%    { transform: translate(0%,   0%)   rotate(0deg)   scale(1); }
    12.5% { transform: translate(26%,  13%)  rotate(7deg)   scale(1.04); }
    25%   { transform: translate(38%, -2%)   rotate(-4deg)  scale(0.97); }
    37.5% { transform: translate(26%, -16%)  rotate(9deg)   scale(1.02); }
    50%   { transform: translate(0%,   1%)   rotate(-7deg)  scale(1); }
    62.5% { transform: translate(-27%, 14%)  rotate(5deg)   scale(1.03); }
    75%   { transform: translate(-39%, -1%)  rotate(-9deg)  scale(0.96); }
    87.5% { transform: translate(-25%,-15%)  rotate(6deg)   scale(1.02); }
    100%  { transform: translate(0%,   0%)   rotate(0deg)   scale(1); }
  }
  @media (prefers-reduced-motion: reduce){ .guide-hero-bg{ animation: none; } }
  .guide-hero .wrap{ position: relative; z-index: 1; }
  .guide-hero .kicker{ justify-content:center; }
  .guide-hero .kicker::before{ display:none; }
  h1.title{
    font-family: "Fraunces", serif;
    font-weight: 900;
    font-size: clamp(40px, 6.5vw, 80px);
    line-height: 0.98;
    letter-spacing: -0.025em;
    margin: 14px 0 20px;
  }
  .title-brand{ color: var(--orange); }
  .guide-hero .title-brand{ color: var(--ink); }
  .title-brand .letter{
    display: inline-block;
    white-space: pre;
    animation: letter-jump .6s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes letter-jump{
    0%{ transform: translateY(0); }
    40%{ transform: translateY(-24px); }
    100%{ transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    .title-brand .letter{ animation: none; }
  }
  .guide-hero .lede{
    font-size: clamp(18px, 2vw, 22px);
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 auto 32px;
  }
  .lede-sub{
    font-weight: 700;
    color: var(--ink-soft);
    margin-bottom: 8px !important;
  }

  /* ---------- Meet the gang ---------- */
  .gang{ padding: 8px 0 64px; }
  .gang h2{ max-width: 46ch; margin-left: auto; margin-right: auto; }
  .gang-grid{
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  @media (max-width: 720px){ .gang-grid{ grid-template-columns: repeat(2, 1fr); } }
  .gang-card{
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 4px 4px 0 var(--ink);
    text-align: center;
  }
  .gang-card img{
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    transition: transform .3s ease;
  }
  .gang-card:hover img{ transform: scale(1.06); }
  @media (prefers-reduced-motion: reduce){
    .gang-card img{ transition: none; }
  }
  .gang-tag{
    display: block;
    color: #fff;
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 14px;
    padding: 5px 8px;
  }
  .gang-card p{
    margin: 0;
    padding: 8px 10px 12px;
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.35;
  }
  .gang-profs-lede{
    margin: 40px 0 16px;
    text-align: center;
    font-weight: 700;
    font-size: 15.5px;
    color: var(--ink-soft);
  }
  .gang-profs{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .gang-profs img{
    width: 108px; height: 108px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--paper);
    box-shadow: 0 0 0 2px var(--ink);
    position: relative;
    cursor: zoom-in;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  }
  .gang-profs img:hover,
  .gang-profs img:focus-visible{
    transform: scale(2.2);
    z-index: 5;
    box-shadow:
      0 0 0 4px var(--paper),
      0 0 0 8px var(--ink),
      0 16px 28px -10px rgba(20,23,26,0.45);
  }
  @media (prefers-reduced-motion: reduce){
    .gang-profs img{ transition: none; }
  }

  /* ---------- Glossary ---------- */
  .glossary-list{
    max-width: 820px;
    margin: 0 auto;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 8px 32px;
  }
  .glossary-entry{
    padding: 24px 0;
    border-bottom: 2px dashed var(--ink-soft);
    scroll-margin-top: 130px;
    border-radius: 10px;
  }
  .glossary-entry:last-child{ border-bottom: 0; }
  .glossary-entry dt{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 20px;
    color: var(--ink);
    margin: 0 0 6px;
  }
  .glossary-entry dd{
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .glossary-entry:target{
    animation: glossary-flash 1.8s ease;
  }
  @keyframes glossary-flash{
    0%{ background: var(--gold); }
    100%{ background: transparent; }
  }
  @media (prefers-reduced-motion: reduce){
    .glossary-entry:target{ animation: none; background: var(--gold); }
  }
  /* ---------- Glossary word cards ---------- */
  .glossary-link{
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(20,23,26,0.42);
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 4px;
    cursor: pointer;
  }
  .glossary-link:hover,
  .glossary-link[aria-expanded="true"]{
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
  }

  .glossary-pop{
    position: fixed;
    z-index: 200;
    width: min(320px, calc(100vw - 28px));
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 16px;
    padding: 16px 18px 18px;
    box-shadow: 6px 6px 0 var(--ink);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .14s ease, transform .14s ease;
    text-align: left;
  }
  .glossary-pop.is-open{ opacity: 1; transform: translateY(0); }
  @media (prefers-reduced-motion: reduce){
    .glossary-pop{ transition: none; transform: none; }
  }
  .glossary-pop h4{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 18px;
    margin: 0 34px 6px 0;
    line-height: 1.2;
  }
  .glossary-pop p{
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .glossary-pop-close{
    position: absolute;
    top: 8px; right: 8px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0;
    font-size: 22px; line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: 50%;
  }
  .glossary-pop-close:hover{ background: rgba(20,23,26,0.07); color: var(--ink); }

  @media (max-width: 700px){
    /* a sheet at the bottom, the same shape the map pins use on a phone */
    .glossary-pop{
      width: auto;
      left: 14px; right: 14px; bottom: 14px; top: auto !important;
      transform: translateY(10px);
      box-shadow: 0 -6px 40px -12px rgba(20,23,26,0.45), 5px 5px 0 var(--ink);
    }
    .glossary-pop.is-open{ transform: translateY(0); }
  }

  /* ---------- Green AI scale ---------- */
  .eco-scale{
    margin: 28px 0 0;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 22px;
    box-shadow: 6px 6px 0 var(--ink);
    padding: 24px 20px 22px;
    text-align: center;
  }
  .eco-stage{ position: relative; height: 230px; max-width: 560px; margin: 0 auto; }
  .eco-post{
    position: absolute; left: 50%; top: 36px; bottom: 14px; width: 8px; margin-left: -4px;
    background: var(--ink); border-radius: 4px;
  }
  .eco-base{
    position: absolute; left: 50%; bottom: 0; width: 120px; height: 16px; margin-left: -60px;
    background: var(--ink); border-radius: 8px;
  }
  .eco-beam{
    --tilt: 0deg;
    position: absolute; left: 4%; right: 4%; top: 36px; height: 8px;
    background: var(--ink); border-radius: 4px;
    transform: rotate(var(--tilt));
    transform-origin: 50% 50%;
    transition: transform .9s cubic-bezier(.34,1.4,.5,1);
  }
  .eco-pan{
    position: absolute; top: 4px; width: 150px; margin-left: -75px;
    display: flex; flex-direction: column; align-items: center;
    transform: rotate(calc(var(--tilt) * -1));
    transform-origin: 50% 0;
    transition: transform .9s cubic-bezier(.34,1.4,.5,1);
  }
  .eco-pan-l{ left: 6%; }
  .eco-pan-r{ left: 94%; }
  .eco-pan::before{
    content: ""; width: 2px; height: 46px; background: var(--ink);
  }
  .eco-load{
    width: 100%; min-height: 46px; box-sizing: border-box;
    font-size: 24px; line-height: 1.1; padding: 6px 6px 0;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    background: var(--yellow);
    border: 2px solid var(--ink); border-bottom: 0; border-radius: 12px 12px 0 0;
  }
  .eco-pan-r .eco-load{ background: #CDEFD3; }
  .eco-tag{
    display: block; width: 100%; box-sizing: border-box;
    background: var(--yellow); border: 2px solid var(--ink); border-top: 0; border-radius: 0 0 18px 18px;
    padding: 4px 8px 7px; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--ink);
  }
  .eco-pan-r .eco-tag{ background: #CDEFD3; }
  .eco-controls{ max-width: 560px; margin: 18px auto 14px; }
  .eco-ends{
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end;
    font-size: 14px; font-weight: 700; line-height: 1.25; margin-bottom: 8px;
  }
  .eco-ends span:first-child{ text-align: left; }
  .eco-ends span:last-child{ text-align: right; }
  .eco-mid{ text-align: center; color: var(--ink-soft); font-size: 12.5px; }
  .eco-slider{
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 14px; border-radius: 999px; margin: 0;
    background: linear-gradient(90deg, var(--yellow), #CDEFD3);
    border: 2px solid var(--ink); cursor: pointer;
  }
  .eco-slider::-webkit-slider-thumb{
    -webkit-appearance: none; appearance: none;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ink); border: 3px solid var(--paper);
    box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 var(--ink);
  }
  .eco-slider::-moz-range-thumb{
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--ink); border: 3px solid var(--paper);
    box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 var(--ink);
  }
  .eco-hint{
    margin: 4px 0 10px; text-align: center;
    font-weight: 800; font-size: 16px; color: var(--ink);
    transition: opacity .4s ease, max-height .4s ease, margin .4s ease;
    max-height: 3em; overflow: hidden;
  }
  .eco-hint.is-calm .eco-hand{ animation: none; }
  .eco-hand{ display: inline-block; animation: eco-sway 1.4s ease-in-out infinite; }
  @keyframes eco-sway{
    0%, 100%{ transform: translateX(-14px) rotate(-12deg); }
    50%{ transform: translateX(14px) rotate(12deg); }
  }
  .eco-attract::-webkit-slider-thumb{ animation: eco-pulse 1.3s ease-out infinite; }
  .eco-attract::-moz-range-thumb{ animation: eco-pulse 1.3s ease-out infinite; }
  @keyframes eco-pulse{
    0%{ box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 var(--ink), 0 0 0 2px rgba(242,214,58,.9); }
    100%{ box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 var(--ink), 0 0 0 16px rgba(242,214,58,0); }
  }
  @media (prefers-reduced-motion: reduce){
    .eco-hand, .eco-attract::-webkit-slider-thumb, .eco-attract::-moz-range-thumb{ animation: none; }
  }
  .eco-slider:focus-visible{ outline: 3px solid var(--ink); outline-offset: 4px; }
  .eco-scale figcaption{ font-size: 17px; line-height: 1.5; color: var(--ink-soft); max-width: 560px; margin: 0 auto; min-height: 4.6em; }
  @media (max-width: 520px){
    .eco-pan{ width: 112px; margin-left: -56px; }
    .eco-load{ font-size: 19px; }
    .eco-tag{ font-size: 11px; }
    .eco-stage{ height: 215px; }
    .eco-pan-l{ left: 17%; }
    .eco-pan-r{ left: 83%; }
  }
  @media (prefers-reduced-motion: reduce){
    .eco-beam, .eco-pan{ transition: none; }
  }

  /* ---------- Final Challenge quiz ---------- */
  .final-quiz{
    max-width: 700px;
    margin: 0 auto;
  }
  .final-quiz-box{
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 32px;
    text-align: center;
  }
  .final-quiz-box h4{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 22px;
    margin: 0 0 12px;
  }
  .final-quiz-box p{
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-soft);
  }
  .final-quiz-progress{ margin-bottom: 20px; }
  .final-quiz-progress-label{
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
  .final-quiz-progress-bar{
    width: 100%;
    height: 10px;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 999px;
    overflow: hidden;
  }
  .final-quiz-progress-fill{
    height: 100%;
    width: 10%;
    background: var(--jet);
    transition: width .4s ease;
  }
  .final-quiz-question-box{
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 24px 28px;
    margin-bottom: 24px;
  }
  .final-quiz-question-box p{
    margin: 0;
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 18.5px;
    text-align: center;
  }
  #finalQuizOptions{ max-width: 100%; margin: 0; }
  @media (min-width: 700px){ #finalQuizOptions{ margin-left: 0; } }
  /* ---------- Certificate ---------- */
  .cert-form{
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 16px;
    box-shadow: 5px 5px 0 var(--ink);
    padding: 18px 20px 20px;
    margin: 0 0 24px;
    color: var(--ink);
  }
  .cert-form h5{ font-family: "Fraunces", serif; font-weight: 800; font-size: 20px; margin: 0 0 6px; }
  .cert-form p{ margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
  .cert-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .cert-label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cert-input{
    flex: 1 1 200px; min-width: 0;
    font: inherit; font-size: 17px; padding: 12px 14px;
    border: 2px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink);
  }
  .cert-input.is-needed{ border-color: #d6336c; box-shadow: 0 0 0 3px rgba(214,51,108,.25); }
  .final-quiz-medal{
    font-size: 72px;
    text-align: center;
    line-height: 1;
    margin-bottom: 12px;
  }
  #finalQuizScoreText{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 24px;
    text-align: center;
    margin: 0 0 24px;
  }
  .final-quiz-review{
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .final-quiz-review li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 14px;
    padding: 14px 18px;
    font-size: 15.5px;
    line-height: 1.5;
  }
  .final-quiz-review .review-icon{
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 900;
    color: #fff;
  }
  .final-quiz-review li.is-correct .review-icon{ background: var(--quiz-green); }
  .final-quiz-review li.is-incorrect .review-icon{ background: var(--quiz-red); }
  .final-quiz-review .review-text strong{ display: block; margin-bottom: 2px; }
  .final-quiz-review .review-text span{ color: var(--ink-soft); font-size: 13px; }
  #finalQuizRetry{ display: flex; margin: 0 auto; }
  .btn-cta.final-quiz-start, .btn-cta#finalQuizRetry{ background: #00ff9f; }
  .btn-cta.btn-cta-teal{ background: var(--cyan); }

  /* ---------- Picture gallery (Show Us Your AI) ---------- */
  .gallery-steps{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
  }
  @media (max-width: 760px){ .gallery-steps{ grid-template-columns: 1fr; } }
  .gallery-step{
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 22px 22px 20px;
    opacity: 0;
    transform: translateX(-70px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.25,.75,.35,1.1);
  }
  .gallery-step.is-in{
    opacity: 1;
    transform: translateX(0);
  }
  .gallery-step.is-in:hover{
    transform: translateX(0) translateY(-6px);
    transition: transform .25s ease;
  }
  @media (prefers-reduced-motion: reduce){
    .gallery-step{ opacity: 1; transform: none; transition: none; }
    .gallery-step.is-in:hover{ transform: none; }
  }
  .gallery-step-num{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--jet);
    color: #fff;
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 26px;
  }
  .gallery-step p{ margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); padding-top: 6px; }
  .padlet-embed{
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 14px;
    margin-top: 32px;
  }
  .padlet-embed iframe{
    width: 100%;
    aspect-ratio: 16/10;
    border: 0;
    border-radius: 14px;
    display: block;
  }
  .padlet-fallback{
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--ink-soft);
  }
  .padlet-fallback a{ color: var(--ink); font-weight: 700; }

  /* ---------- Confetti (high score celebration) ---------- */
  .confetti-layer{
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
  }
  .confetti-piece{
    position: absolute;
    top: -20px;
    width: 10px;
    height: 16px;
    opacity: 0.95;
    border-radius: 2px;
    animation: confetti-fall linear forwards;
  }
  @keyframes confetti-fall{
    0%{ transform: translate(0, 0) rotate(0deg); opacity: 1; }
    100%{ transform: translate(var(--drift, 0px), 108vh) rotate(720deg); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .confetti-layer{ display: none; }
  }

  /* ---------- CTA button ---------- */
  .btn-cta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--yellow);
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 16px;
    font-family: inherit;
    text-decoration: none;
    box-shadow: 5px 5px 0 var(--ink);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn-cta .arrow{ display:inline-block; transition: transform .15s ease; }
  .btn-cta:hover{ transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--ink); }
  .btn-cta:hover .arrow{ transform: translateX(5px); }
  .btn-cta:active{ transform: translate(0,0); box-shadow: 3px 3px 0 var(--ink); }
  .btn-cta.ghost{
    background: var(--paper);
  }

  /* ---------- Chapter blocks ----------
     Vibrant palette: Jet Black / Strong Cyan / Mint Cream / Grapefruit Pink /
     Royal Gold. Cyan, mint, pink and gold are all light-to-mid tones, so they
     keep the site's normal dark ink text (already AA-safe on all four).
     Jet Black is the one dark background, reserved for the closing section,
     and switches its loose text to white for contrast. */
  .chapter-block{ background: var(--cyan); }
  .chapter-block.alt{ background: var(--coral); }
  .guide-hero{ background: var(--gold); }
  .gang{ background: var(--mint); }
  .guide-end{ background: var(--jet); color: #fff; }
  .guide-end .kicker{ color: rgba(255,255,255,0.75); }
  .guide-end .kicker::before{ background: rgba(255,255,255,0.6); }
  .guide-end .intro{ color: rgba(255,255,255,0.85); }
  .guide-end h2{ color: #fff; }
  /* Cyan and coral are mid-saturation, so the usual grey ink-soft body text
     dips under 4.5:1 contrast sitting directly on them (cards/bubbles inside
     are unaffected — they keep their own white/paper backgrounds). Darken
     just the loose text that sits straight on the section colour. */
  .chapter-block .chapter-intro p,
  .chapter-block .chapter-text p,
  .chapter-block .flip-hint,
  .chapter-block .career-hint,
  .chapter-block .kicker,
  .chapter-block .compare-headings h4,
  .chapter-block .capability-head{ color: var(--ink) !important; }
  .chapter-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  @media (max-width: 900px){ .chapter-grid{ grid-template-columns: 1fr; } }
  .chapter-block.reverse .chapter-grid{ direction: rtl; }
  .chapter-block.reverse .chapter-grid > *{ direction: ltr; }
  .chapter-num{
    display:inline-flex; align-items:center; justify-content:center;
    width: 44px; height: 44px; border-radius: 50%;
    border: 2px solid var(--ink);
    font-family: "Fraunces", serif;
    font-weight: 800; font-size: 18px;
    background: var(--yellow);
    margin-bottom: 16px;
  }
  .chapter-block.c-pink .chapter-num{ background: var(--pink); }
  .chapter-block.c-green .chapter-num{ background: var(--green); }
  .chapter-block.c-purple .chapter-num{ background: var(--purple); color:#fff; }
  .chapter-block.c-blue .chapter-num{ background: var(--blue); }
  .chapter-text h3{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -0.01em;
    margin: 0 0 14px;
    line-height: 1.1;
  }
  .chapter-text p{ margin: 0 0 14px; color: var(--ink-soft); font-size: 18.5px; }
  .chapter-text ul{ margin: 0; padding-left: 20px; color: var(--ink-soft); }
  .chapter-text li{ margin-bottom: 8px; }
  .chapter-img{
    position: relative;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--paper);
    box-shadow: 10px 10px 0 var(--yellow);
  }
  .chapter-img img{ width:100%; height:100%; object-fit: cover; }
  .chapter-img.chapter-img--plain{
    border: none;
    background: none;
    box-shadow: none !important;
  }
  .chapter-img.chapter-img--plain img{ object-fit: contain; }
  .brain-pulse{
    transform-origin: center;
    opacity: 0;
    transform: translateX(-160px) rotate(-8deg) scale(0.6);
    transition: opacity .6s ease, transform .75s cubic-bezier(.34,1.56,.64,1);
  }
  .brain-pulse.is-visible{
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
    animation: brain-pulse 7s ease-in-out .75s infinite;
  }
  @keyframes brain-pulse{
    0%, 100%{ transform: scale(1); }
    50%{ transform: scale(1.015); }
  }
  @media (prefers-reduced-motion: reduce){
    .brain-pulse{ opacity: 1; transform: none; transition: none; animation: none; }
  }
  .chapter-block.c-pink .chapter-img{ box-shadow: 10px 10px 0 var(--pink); }
  .chapter-block.c-green .chapter-img{ box-shadow: 10px 10px 0 var(--green); }
  .chapter-block.c-purple .chapter-img{ box-shadow: 10px 10px 0 var(--purple); }
  .chapter-block.c-blue .chapter-img{ box-shadow: 10px 10px 0 var(--blue); }

  /* ---------- Chapter 1: what is AI ---------- */
  .explain-card{ margin-bottom: 56px; }
  .info-callout{
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    padding: 26px 30px;
    margin-bottom: 56px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .info-callout-kicker{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 19px;
    margin: 0 0 10px;
  }
  .info-callout p:last-child{ margin: 0; color: var(--ink-soft); font-size: 18.5px; line-height: 1.55; }

  .concept-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 56px;
  }
  @media (max-width: 800px){ .concept-grid{ grid-template-columns: 1fr; } }
  .concept-grid.pop-reveal .concept-card{
    opacity: 0;
    transform: translateY(70px) scale(0.7);
    transition: opacity .55s ease, transform .65s cubic-bezier(.34,1.56,.64,1);
  }
  .concept-grid.pop-reveal .concept-card.is-popped{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  @media (prefers-reduced-motion: reduce){
    .concept-grid.pop-reveal .concept-card{ opacity: 1; transform: none; transition: none; }
  }
  .concept-grid.pop-reveal.shiver .concept-card.is-popped{
    animation: card-shiver .4s ease-in-out .65s;
  }
  @keyframes card-shiver{
    0%, 100%{ transform: translateY(0) scale(1) rotate(0deg); }
    20%{ transform: translateY(0) scale(1) rotate(-2.5deg); }
    40%{ transform: translateY(0) scale(1) rotate(2.5deg); }
    60%{ transform: translateY(0) scale(1) rotate(-1.5deg); }
    80%{ transform: translateY(0) scale(1) rotate(1.5deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .concept-grid.pop-reveal.shiver .concept-card.is-popped{ animation: none; }
  }

  /* ---------- Future of AI carousel ---------- */
  .future-carousel{
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
  }
  .carousel-viewport{
    flex: 1;
    overflow: hidden;
    padding: 6px 6px 12px 6px;
    margin: -6px -6px -12px -6px;
  }
  .carousel-track{
    display: flex;
    gap: 20px;
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
  }
  .carousel-track .concept-card{
    flex: 0 0 calc((100% - 40px) / 3);
    height: 320px;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
  .carousel-track .concept-card ul{ overflow-y: auto; }
  @media (max-width: 900px){
    .carousel-track .concept-card{ flex-basis: calc((100% - 20px) / 2); }
  }
  @media (max-width: 600px){
    .carousel-track .concept-card{ flex-basis: 100%; height: 280px; }
  }
  .carousel-arrow{
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease;
  }
  .carousel-arrow:hover{ transform: translateY(-3px); }
  .carousel-arrow:active{ transform: translateY(0); }
  @media (max-width: 600px){
    .future-carousel{ gap: 10px; }
    .carousel-arrow{ width: 42px; height: 42px; font-size: 20px; }
  }
  .carousel-dots{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 0 56px;
  }
  .carousel-dot{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    background: transparent;
    padding: 0;
    cursor: pointer;
  }
  .carousel-dot.is-active{ background: var(--ink); }

  /* ---------- Flip cards (AI in Daily Life) ---------- */
  .flip-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin: 32px 0 56px;
  }
  @media (max-width: 760px){ .flip-grid{ grid-template-columns: 1fr; } }
  .flip-card{
    aspect-ratio: 16/8;
    perspective: 1400px;
    cursor: pointer;
  }
  @media (max-width: 480px){ .flip-card{ aspect-ratio: 16/10; } }
  .flip-inner{
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
    transform-style: preserve-3d;
  }
  .flip-card.is-flipped .flip-inner{ transform: rotateY(180deg); }
  .flip-front, .flip-back{
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 5px 5px 0 var(--ink);
    padding: 26px 30px;
    color: var(--ink);
    display: flex;
    overflow: hidden;
  }
  .flip-front{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 22px;
  }
  .flip-front .flip-emoji{
    font-size: 68px;
    line-height: 1;
    display: inline-block;
    animation: flip-emoji-float 2.6s ease-in-out infinite;
  }
  @keyframes flip-emoji-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }
  @media (prefers-reduced-motion: reduce){ .flip-front .flip-emoji{ animation: none; } }
  .flip-front h4{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 26px;
    margin: 0;
  }
  .flip-back{
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    transform: rotateY(180deg);
  }
  .flip-back.has-image{
    flex-direction: row;
    align-items: center;
    gap: 18px;
  }
  .flip-back.has-image .flip-back-text{ flex: 1 1 52%; min-width: 0; }
  .flip-back.has-image .flip-back-text h4{ font-size: 17px; margin-bottom: 8px; }
  .flip-back.has-image .flip-back-text ul{ font-size: 14px; line-height: 1.45; }
  .flip-back.has-image .flip-back-text p{ margin: 0; font-size: 14px; line-height: 1.45; }
  .flip-back.has-image .flip-back-img{
    flex: 0 0 46%;
    width: 46%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 14px;
    border: 2px solid var(--ink);
  }
  .flip-grid.has-image-cards .flip-card{ aspect-ratio: 16/13; }
  @media (max-width: 700px){
    .flip-grid.has-image-cards .flip-card{ aspect-ratio: 16/16; }
  }
  @media (max-width: 480px){
    .flip-back.has-image{ flex-direction: column; align-items: flex-start; }
    .flip-back.has-image .flip-back-text{ flex-basis: auto; }
    .flip-back.has-image .flip-back-img{ width: 100%; flex-basis: auto; aspect-ratio: 1/1; }
    .flip-grid.has-image-cards .flip-card{ aspect-ratio: 16/26; }
  }
  .flip-back h4{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 19px;
    margin: 0 0 12px;
  }
  .flip-back ul{
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 17px;
    line-height: 1.6;
  }
  .flip-hint{ text-align: center; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink-soft); margin: -28px 0 32px; }
  @media (prefers-reduced-motion: reduce){ .flip-inner{ transition: none; } }

  /* ---------- Flashcards (hardware/software/binary) ---------- */
  .flashcard-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 32px 0 56px;
  }
  @media (max-width: 800px){ .flashcard-grid{ grid-template-columns: 1fr; gap: 32px; } }
  .flashcard{
    --tilt: -3deg;
    position: relative;
    border-radius: 32px;
    border: 2px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    padding: 38px 28px 30px;
    color: var(--ink);
    text-align: center;
    transform: rotate(var(--tilt));
    transition: transform .3s ease;
  }
  .flashcard:nth-child(2){ --tilt: 2.5deg; }
  .flashcard:nth-child(3){ --tilt: -2deg; }
  .flashcard:hover{ transform: rotate(0deg) translateY(-4px); }
  .flashcard .flashcard-icon{
    font-size: 64px;
    line-height: 1;
    margin-bottom: 4px;
  }
  .flashcard h4{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 20px;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .flashcard ul{
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.6;
  }
  .flashcard li{ margin-bottom: 4px; }
  .flashcard-grid.is-scrolling .flashcard{
    animation: flashcard-bob 1.4s ease-in-out infinite;
  }
  @keyframes flashcard-bob{
    0%, 100%{ transform: rotate(var(--tilt)) translateY(0); }
    50%{ transform: rotate(var(--tilt)) translateY(-8px); }
  }
  @media (prefers-reduced-motion: reduce){
    .flashcard-grid.is-scrolling .flashcard{ animation: none; }
  }
  .concept-card{
    border-radius: var(--radius);
    padding: 24px 26px;
    color: var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
  }
  .concept-card h4{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 20px;
    margin: 0 0 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
  }
  .concept-card h4 .emoji{
    display: inline-block;
    font-size: 60px;
    line-height: 1;
    margin-bottom: 6px;
    animation: concept-float 2.8s ease-in-out infinite;
    transition: font-size .25s ease;
  }
  #ch2 .concept-card h4 .emoji:hover,
  #ch3 .concept-card h4 .emoji:hover,
  #ch9 .concept-card h4 .emoji:hover,
  #ch14 .concept-card h4 .emoji:hover{ font-size: 92px; }
  @keyframes concept-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-8px); }
  }
  @media (prefers-reduced-motion: reduce){ .concept-card h4 .emoji{ animation: none; } }
  .concept-card ul, .concept-card ol{ margin: 0; padding-left: 20px; font-size: 17px; line-height: 1.7; opacity: 0.95; }
  .concept-card ol{ list-style: none; padding-left: 0; counter-reset: step; }
  .concept-card ol li{
    counter-increment: step;
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 4px;
  }
  .concept-card ol li::before{
    content: counter(step);
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    font-size: 11px; font-weight: 800;
    animation: step-pop 1.8s ease-in-out infinite;
  }
  .concept-card ol li:nth-child(1)::before{ animation-delay: 0s; }
  .concept-card ol li:nth-child(2)::before{ animation-delay: .15s; }
  .concept-card ol li:nth-child(3)::before{ animation-delay: .3s; }
  .concept-card ol li:nth-child(4)::before{ animation-delay: .45s; }
  .concept-card ol li:nth-child(5)::before{ animation-delay: .6s; }
  @keyframes step-pop{
    0%, 80%, 100%{ transform: scale(1); }
    90%{ transform: scale(1.35); }
  }
  @media (prefers-reduced-motion: reduce){ .concept-card ol li::before{ animation: none; } }

  .fact-banner{
    background: var(--yellow);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    padding: 22px 28px;
    margin-bottom: 56px;
    box-shadow: 6px 6px 0 var(--ink);
  }
  .fact-banner-kicker{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 17px;
    margin: 0 0 8px;
    display: flex; align-items: center; gap: 8px;
  }
  .fact-banner-kicker .emoji{ display:inline-block; animation: fact-pulse 1.6s ease-in-out infinite; }
  @keyframes fact-pulse{
    0%, 100%{ transform: scale(1) rotate(0deg); }
    50%{ transform: scale(1.2) rotate(8deg); }
  }
  @media (prefers-reduced-motion: reduce){ .fact-banner-kicker .emoji{ animation: none; } }
  .fact-banner p{ margin: 0 0 12px; font-size: 17px; color: rgba(20,23,26,0.8); line-height: 1.5; }
  .fact-banner p:last-child{ margin: 0; }

  .hype-chart{ margin-bottom: 22px; }
  .hype-chart svg{ width: 100%; height: auto; overflow: visible; }
  .hype-axis{
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 700;
    fill: var(--green);
  }
  .hype-label{
    font-family: "Fraunces", serif;
    font-weight: 700;
    font-size: 15px;
    fill: var(--ink);
  }
  .hype-label-slope{ fill: var(--ink-soft); font-style: italic; font-size: 13.5px; }
  .hype-cart{
    offset-path: path("M75,280 Q130,280 165,130 Q180,75 197,68 Q214,75 229,130 Q245,190 270,240 Q290,280 320,280 Q420,280 480,200 Q540,130 600,110 Q630,102 650,100");
    offset-rotate: auto;
    animation: cart-drive 7s linear infinite;
    cursor: grab;
    touch-action: none;
  }
  .hype-cart.is-dragging{ cursor: grabbing; animation: none; }
  @keyframes cart-drive{
    0%{ offset-distance: 0%; }
    100%{ offset-distance: 100%; }
  }
  @media (prefers-reduced-motion: reduce){
    .hype-cart{ animation: none; offset-distance: 0%; }
  }
  @media (max-width: 600px){
    .hype-axis{ font-size: 17px; }
    .hype-label{ font-size: 20px; }
    .hype-label-slope{ font-size: 18px; transform: translate(40px, -14px); }
  }

  .hype-box{
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    padding: 32px;
    box-shadow: 8px 8px 0 var(--ink);
  }
  .hype-box h4{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 19px;
    margin: 0 0 10px;
  }
  .hype-box p{ margin: 0 0 14px; color: var(--ink-soft); font-size: 18.5px; line-height: 1.55; }
  .hype-box p:last-child{ margin-bottom: 0; }
  .flow-diagram{
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 18px;
  }
  .flow-step{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--purple);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 13px 22px;
    border-radius: 999px;
    text-align: center;
  }
  .flow-arrow{
    display: inline-block;
    align-self: center;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    animation: flow-slide 1.2s ease-in-out infinite;
  }
  /* the chain reads as a list on a phone, so no arrow is ever stranded at the
     end of a wrapped line */
  @media (min-width: 761px){
    /* one line per label above phone width, so no chip breaks in half */
    .flow-step{ white-space: nowrap; }
    .flow-step small{ white-space: normal; }
  }
  @media (max-width: 760px){
    .flow-diagram{ flex-direction: column; gap: 8px; }
    .flow-step{ width: 100%; max-width: 320px; }
    .flow-arrow{ transform: rotate(90deg); animation: none; font-size: 17px; }
  }
  @keyframes flow-slide{
    0%, 100%{ transform: translateX(0); opacity: 0.6; }
    50%{ transform: translateX(5px); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce){ .flow-arrow{ animation: none; } }
  .hype-note{ margin: 0 !important; font-size: 14px !important; font-style: italic; }

  /* ---------- Chapter 3: How AI Actually Learns ---------- */
  .section-subhead{
    font-family: "Fraunces", serif;
    font-weight: 900;
    font-size: clamp(20px, 2.6vw, 26px);
    letter-spacing: -0.01em;
    margin: 44px 0 20px;
  }
  .neural-box{
    background: var(--jet);
    color: #fff;
    border-radius: var(--radius);
    padding: 32px 34px 34px;
    margin-top: 56px;
  }
  .neural-box h4{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 19px;
    margin: 0 0 10px;
    color: var(--yellow);
  }
  .neural-box p{ margin: 0 0 16px; color: rgba(255,255,255,0.82); font-size: 17px; line-height: 1.55; }
  .neural-box p:last-child{ margin-bottom: 0; }
  .neural-box .flow-diagram{ margin-bottom: 0; }

  .principle-stack{ position: relative; margin: 8px 0 48px; }
  .principle-stack-sticky{
    position: sticky;
    top: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
  .principle-deal-group{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .principle-deal-group .section-subhead{ text-align: center; }
  .principle-blobs{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  .principle-row{
    display: flex;
    justify-content: center;
    gap: 36px;
  }
  .principle-blob{
    position: relative;
    flex: 0 0 auto;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    border: 3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 42px;
    font-size: 14.5px;
    line-height: 1.4;
    opacity: 0;
    transform: translate(var(--dx, 0px), var(--dy, -40px)) scale(0.45) rotate(-10deg);
    transition: transform .65s cubic-bezier(.2,.75,.3,1.05), opacity .5s ease;
    will-change: transform, opacity;
  }
  .principle-blob.is-dealt{
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  @media (prefers-reduced-motion: reduce){
    .principle-blob{ transition: opacity .3s ease; transform: none !important; opacity: 1; }
  }
  .principle-blob .emoji{ font-size: 46px; display: block; margin-bottom: 10px; transition: font-size .25s ease; }
  .principle-blob .emoji:hover{ font-size: 70px; }
  .principle-blob strong{
    display: block;
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 19px;
    margin-bottom: 8px;
  }
  @media (max-width: 950px){
    .principle-blob{ width: 260px; height: 260px; padding: 38px 32px; font-size: 13px; }
    .principle-blob .emoji{ font-size: 34px; margin-bottom: 6px; }
    .principle-blob strong{ font-size: 17px; margin-bottom: 6px; }
    .principle-row{ gap: 22px; flex-wrap: wrap; }
    .principle-blobs{ gap: 22px; }
  }
  @media (max-width: 640px){
    .principle-row{ flex-direction: column; align-items: center; }
    .principle-blob{ width: 290px; height: 290px; padding: 42px 36px; font-size: 13.5px; }
  }

  .career-stack{
    position: relative;
    margin: 8px 0 32px;
  }
  .career-stack-sticky{
    position: sticky;
    top: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
  .career-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    width: 100%;
    max-width: 1080px;
  }
  @media (max-width: 1000px){ .career-grid{ grid-template-columns: repeat(3, 1fr); max-width: 720px; } }
  @media (max-width: 720px){ .career-grid{ grid-template-columns: repeat(2, 1fr); max-width: 480px; gap: 16px; } }
  #ch7 .career-grid{
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin: 0 auto;
  }
  #ch7 .career-card{ min-height: 320px; }
  #ch7 .career-grid{ margin-bottom: 48px; }
  @media (max-width: 720px){
    #ch7 .career-grid{ grid-template-columns: 1fr; max-width: 420px; }
  }
  .career-grid, .career-stack-sticky{ overflow: visible; }
  .career-card{
    position: relative;
    border-radius: var(--radius);
    min-height: 230px;
    perspective: 1400px;
    opacity: 0;
    transform: translate(var(--dx, 0px), var(--dy, -40px)) scale(0.45) rotate(-10deg);
    transition: transform .65s cubic-bezier(.2,.75,.3,1.05), opacity .5s ease;
    will-change: transform, opacity;
    z-index: 1;
  }
  .career-card.is-dealt{
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  .career-card.is-flipped{
    position: fixed;
    inset: 24px;
    z-index: 30;
    transition: none;
    perspective: none;
    animation: expand-card .4s cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes expand-card{
    0%{ transform: scale(0.4); opacity: 0.6; }
    100%{ transform: scale(1); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce){
    .career-card.is-flipped{ animation: none; }
  }
  .career-card.is-flipped::before{
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(21,23,26,0.65);
    z-index: -1;
  }
  /* Once expanded to fill the page, drop the 3D rotation entirely and
     cross-fade between faces instead — combining position:fixed with an
     active rotateY()/backface-visibility transform causes a real paint
     bug in Chromium where the box stops covering its own layout area. */
  .career-card.is-flipped .career-card-inner{ transform: none; }
  .career-card.is-flipped .career-card-front{
    opacity: 0;
    pointer-events: none;
  }
  .career-card.is-flipped .career-card-back{
    transform: none;
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce){
    .career-card{ transition: opacity .3s ease; transform: none !important; }
  }
  .career-card:not(.is-dealt){ pointer-events: none; }
  .career-card.is-dealt{ cursor: pointer; }
  .career-card-inner{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
    transform-style: preserve-3d;
  }
  @media (prefers-reduced-motion: reduce){ .career-card-inner{ transition: none; } }
  .career-card-front, .career-card-back{
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--radius);
    padding: 26px;
    color: var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    border: 3px solid var(--ink);
    display: flex;
    transition: opacity .3s ease;
  }
  .career-card-front{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .career-card-front .emoji{
    font-size: 60px;
    line-height: 1;
    display: inline-block;
    margin-bottom: 14px;
    animation: flip-emoji-float 2.6s ease-in-out infinite;
    transition: font-size .25s ease;
  }
  .career-card-front .emoji:hover{ font-size: 92px; }
  @media (prefers-reduced-motion: reduce){ .career-card-front .emoji{ animation: none; } }
  .career-card-front h4{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 19px;
    margin: 0;
  }
  .career-card-back{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotateY(180deg);
    overflow: auto;
    padding: 48px;
    gap: 4px;
  }
  .career-card-img{
    width: min(320px, 40%);
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid var(--ink);
    margin-bottom: 20px;
    cursor: zoom-in;
  }
  .career-card-back h4{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 34px;
    margin: 0 0 16px;
  }
  .career-card-back p{ margin: 0 0 14px; font-size: 21px; line-height: 1.62; max-width: 620px; }
  .career-card-back .career-study{ font-size: 17px; font-style: italic; opacity: 0.85; margin: 0; }
  .career-hint{ text-align: center; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--ink-soft); margin: 0 0 28px; }

  /* ---------- Lightbox (full-size image view) ---------- */
  .lightbox-overlay{
    position: fixed;
    inset: 0;
    background: rgba(21,23,26,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 40px;
    cursor: zoom-out;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }
  .lightbox-overlay.is-open{
    opacity: 1;
    pointer-events: auto;
  }
  .lightbox-overlay img{
    max-width: min(90vw, 1080px);
    max-height: 90vh;
    border-radius: 16px;
    border: 3px solid var(--paper);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }

  .lightbox-node{ display: none; }
  .lightbox-overlay.has-node > img{ display: none; }
  .lightbox-overlay.has-node .lightbox-node{ display: block; width: min(92vw, 980px); max-height: 92vh; }
  .lightbox-node .img-cap{ cursor: zoom-out; box-shadow: 0 20px 60px rgba(0,0,0,0.5); border-radius: 16px; }
  .lightbox-node .diagram-fig{ background: #fff; }
  .lightbox-node .diagram-photo img{ height: auto; }
  .lightbox-node .img-caption{ font-size: clamp(16px, 2.4vw, 24px); padding: 14px 18px; }

  /* ---------- Chapter 1: physical vs digital + quiz ---------- */
  .chapter-intro{ max-width: 74ch; margin: 0 0 48px; }
  .chapter-intro h3{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: clamp(26px, 3.4vw, 38px);
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    line-height: 1.12;
  }
  .chapter-intro p{ margin: 0 0 14px; color: var(--ink-soft); font-size: 18.5px; }
  .chapter-intro p:last-child{ margin-bottom: 0; }

  .compare-grid{ margin-bottom: 64px; }
  .compare-headings{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }
  .compare-headings h4{
    font-family: "Fraunces", serif;
    font-weight: 900;
    font-size: clamp(24px, 3vw, 32px);
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--green);
  }
  .compare-headings .compare-digital-h{
    color: var(--blue);
    grid-column: 3;
  }
  @media (max-width: 800px){
    .compare-headings{ grid-template-columns: 1fr; text-align: center; gap: 8px; }
    .compare-headings .compare-digital-h{ grid-column: 1; }
  }
  .compare-table{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 16px;
    row-gap: 18px;
    align-items: stretch;
  }
  @media (max-width: 800px){
    .compare-table{ grid-template-columns: 1fr; }
  }
  .compare-item{
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
    border: 2px solid var(--ink);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .compare-item.is-physical{ background: #EAFBF9; }
  .compare-item.is-digital{ background: #FFE9E9; }
  /* Each card says which world it belongs to. The two column headings only
     work while they are on screen, and on a phone the table is a single
     column — two cards in, the headings are gone. (They also can't carry the
     distinction by colour: --green and --blue are the same hex in this
     palette, and a rule above forces both headings to ink so they stay
     legible on the teal section.) */
  .compare-tag{
    display: inline-block;
    margin-right: 9px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1.5px solid var(--ink);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    vertical-align: 1px;
  }
  .compare-item.is-physical .compare-tag{ background: #8FE3D8; }
  .compare-item.is-digital .compare-tag{ background: #FFB8B8; }
  .compare-icon{
    font-size: 44px;
    line-height: 1;
    margin-top: 2px;
  }
  .compare-item p, .compare-item div{ margin: 0; font-size: 17px; color: var(--ink-soft); line-height: 1.45; }
  .compare-item strong{ color: var(--ink); }
  .compare-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 700;
    color: var(--ink-soft);
    animation: compare-arrow-slide 1.2s ease-in-out infinite;
  }
  @keyframes compare-arrow-slide{
    0%, 100%{ transform: translateX(0); opacity: 0.6; }
    50%{ transform: translateX(7px); opacity: 1; }
  }
  @keyframes compare-arrow-slide-vert{
    0%, 100%{ transform: rotate(90deg) translateX(0); opacity: 0.6; }
    50%{ transform: rotate(90deg) translateX(7px); opacity: 1; }
  }
  @media (max-width: 800px){
    .compare-arrow{ animation: compare-arrow-slide-vert 1.2s ease-in-out infinite; margin: -4px 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .compare-arrow{ animation: none; }
  }

  .quiz-block{
    margin-top: 56px;
    padding-top: 48px;
    border-top: 2px dashed rgba(20,23,26,0.15);
  }
  .quiz-card{
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 32px;
  }
  @media (max-width: 700px){ .quiz-card{ grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; } }
  .quiz-photo{
    --photo-accent: var(--orange);
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border: 6px solid var(--paper);
    outline: 3px solid var(--photo-accent);
    border-radius: 6px;
    box-shadow: 0 16px 32px -16px rgba(20,23,26,0.35);
    opacity: 0;
    transform: translateX(-90px) rotate(-16deg);
    transition: opacity .6s ease, transform .6s cubic-bezier(.25,.75,.35,1.1);
  }
  .quiz-photo.is-visible{ opacity: 1; transform: translateX(0) rotate(-4deg); }
  .quiz-photo.is-visible:hover{
    transform: translateX(0) rotate(-1deg) translateY(-6px) scale(1.08);
    transition: transform .3s ease;
  }
  @media (prefers-reduced-motion: reduce){
    .quiz-photo{ opacity: 1; transform: rotate(-4deg); transition: none; }
    .quiz-photo.is-visible:hover{ transform: rotate(-4deg); }
  }
  .quiz-photo.teal{ --photo-accent: var(--teal); }
  .quiz-photo.purple{ --photo-accent: var(--purple); }
  .quiz-photo.green{ --photo-accent: var(--green); }
  #guide-farewell .quiz-photo{ transition: opacity .6s ease, transform .3s ease; }
  #guide-farewell .quiz-photo.is-visible:hover{ transform: translateX(0) rotate(-4deg) scale(1.08); }
  .quiz-photo.is-unframed{
    border: 0;
    outline: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    aspect-ratio: 5/2;
    object-fit: contain;
  }
  .quiz-photo.is-unframed.is-visible{
    animation: cloud-float 3.2s ease-in-out .6s infinite;
  }
  @keyframes cloud-float{
    0%, 100%{ transform: translateY(0) rotate(-4deg); }
    50%{ transform: translateY(-16px) rotate(-4deg); }
  }
  @media (prefers-reduced-motion: reduce){
    .quiz-photo.is-unframed.is-visible{ animation: none; }
  }
  .quiz-bubble{
    --bubble-accent: var(--orange);
    position: relative;
    background: var(--paper);
    border: 3px solid var(--bubble-accent);
    border-radius: 20px;
    padding: 22px 26px;
    opacity: 0;
    transform: translateY(50px) scale(0.75) rotate(-4deg);
    transition: opacity .7s ease .25s, transform .7s cubic-bezier(.34,1.56,.64,1) .25s;
  }
  .quiz-bubble.is-visible{ opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
  @media (prefers-reduced-motion: reduce){
    .quiz-bubble{ opacity: 1; transform: none; transition: none; }
  }
  .quiz-bubble.teal{ --bubble-accent: var(--teal); }
  .quiz-bubble.purple{ --bubble-accent: var(--purple); }
  .quiz-bubble.green{ --bubble-accent: var(--green); }
  .quiz-bubble::after{
    content: "";
    position: absolute;
    left: -14px; top: 50%;
    margin-top: -14px;
    width: 0; height: 0;
    border: 14px solid transparent;
    border-right-color: var(--bubble-accent);
    border-left: 0;
  }
  .quiz-bubble::before{
    content: "";
    position: absolute;
    left: -11px; top: 50%;
    margin-top: -11px;
    width: 0; height: 0;
    border: 11px solid transparent;
    border-right-color: var(--paper);
    border-left: 0;
    z-index: 1;
  }
  @media (max-width: 700px){
    .quiz-bubble::after{
      left: 50%; top: -14px; margin-top: 0; margin-left: -14px;
      border-right-color: transparent;
      border-bottom-color: var(--bubble-accent);
      border-top: 0;
    }
    .quiz-bubble::before{
      left: 50%; top: -11px; margin-top: 0; margin-left: -11px;
      border-right-color: transparent;
      border-bottom-color: var(--paper);
      border-top: 0;
    }
  }
  .quiz-bubble p{ margin: 0 0 10px; font-size: 18.5px; color: var(--ink); }
  .quiz-bubble p:last-child{ margin-bottom: 0; }
  .quiz-bubble .quiz-hint{ color: var(--ink-soft); font-size: 16px; font-style: italic; }

  .quiz-options{
    display: grid;
    gap: 14px;
    max-width: 640px;
    margin: 0 0 28px 0;
  }
  @media (min-width: 700px){ .quiz-options{ margin-left: calc(260px + 40px); } }
  .quiz-option{
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 14px;
    padding: 16px 52px 16px 20px;
    cursor: pointer;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  }
  .quiz-option:hover:not(:disabled){ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
  .quiz-option:disabled{ cursor: default; }
  .quiz-option.is-correct{
    background: #DFFBEA;
    border-color: var(--quiz-green);
    border-width: 3px;
    box-shadow: 4px 4px 0 var(--quiz-green);
    color: #0B6B37;
  }
  .quiz-option.is-incorrect{
    background: #FCE3E3;
    border-color: var(--quiz-red);
    border-width: 3px;
    box-shadow: 4px 4px 0 var(--quiz-red);
    color: #8C1420;
  }
  .quiz-option.is-correct::after,
  .quiz-option.is-incorrect::after{
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: #fff;
  }
  .quiz-option.is-correct::after{ content: "✓"; background: var(--quiz-green); }
  .quiz-option.is-incorrect::after{ content: "✕"; background: var(--quiz-red); }

  .quiz-answer{
    display: grid;
    grid-template-columns: minmax(220px, 340px) 1fr;
    gap: 8px;
    align-items: center;
    max-width: 760px;
    margin-left: 0;
  }
  @media (min-width: 700px){ .quiz-answer{ margin-left: calc(260px + 40px); } }
  @media (max-width: 560px){ .quiz-answer{ grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; } }
  .quiz-answer[hidden]{ display: none; }
  .quiz-cloud{
    width: 100%;
    height: auto;
    animation: quiz-cloud-float 4.5s ease-in-out infinite;
  }
  @keyframes quiz-cloud-float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-6px); }
  }
  @media (prefers-reduced-motion: reduce){ .quiz-cloud{ animation: none; } }
  .quiz-answer-bubble{
    position: relative;
    background: var(--paper);
    border: 3px solid var(--green);
    border-radius: 20px;
    padding: 20px 24px;
  }
  .quiz-answer-bubble::after{
    content: "";
    position: absolute;
    left: -14px; top: 50%;
    margin-top: -12px;
    width: 0; height: 0;
    border: 12px solid transparent;
    border-right-color: var(--green);
    border-left: 0;
  }
  .quiz-answer-bubble::before{
    content: "";
    position: absolute;
    left: -9px; top: 50%;
    margin-top: -9px;
    width: 0; height: 0;
    border: 9px solid transparent;
    border-right-color: var(--paper);
    border-left: 0;
    z-index: 1;
  }
  @media (max-width: 560px){
    .quiz-answer-bubble{ margin-top: 14px; }
    .quiz-answer-bubble::after{
      left: 50%; top: -14px; margin-top: 0; margin-left: -12px;
      border-right-color: transparent;
      border-bottom-color: var(--green);
      border-top: 0;
    }
    .quiz-answer-bubble::before{
      left: 50%; top: -9px; margin-top: 0; margin-left: -9px;
      border-right-color: transparent;
      border-bottom-color: var(--paper);
      border-top: 0;
    }
  }
  .quiz-answer-bubble strong{
    display: block;
    font-family: "Fraunces", serif;
    font-size: 15.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 8px;
  }
  .quiz-answer-bubble p{ margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.55; }

  /* ---------- Chapter 2: subhead ---------- */
  .chapter-subhead{
    font-family: "Fraunces", serif;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.01em;
    margin: 4px 0 14px;
  }

  /* ---------- Chapter 3: what can / can't AI do ---------- */
  .capability-group{ margin-bottom: 44px; }
  .capability-head{
    font-family: "Fraunces", serif;
    font-weight: 900;
    font-size: clamp(22px, 2.8vw, 28px);
    letter-spacing: -0.01em;
    margin: 0 0 20px;
  }
  .capability-head.can-do{ color: var(--green); }
  .capability-head.cannot-do{ color: #D14343; }
  .pill-list{ display: flex; flex-wrap: wrap; gap: 12px; }
  .pill{
    display: inline-block;
    background: var(--paper);
    border: 2px solid var(--green);
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    animation: pill-bob 3.2s ease-in-out infinite;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .pill:hover{
    transform: translateY(-4px) scale(1.04);
    box-shadow: 4px 4px 0 var(--green);
    animation-play-state: paused;
  }
  .pill-red{ border-color: #D14343; }
  .pill-red:hover{ box-shadow: 4px 4px 0 #D14343; }

  .pill-list .pill:nth-child(6n+1){ animation-delay: 0s; }
  .pill-list .pill:nth-child(6n+2){ animation-delay: .25s; }
  .pill-list .pill:nth-child(6n+3){ animation-delay: .5s; }
  .pill-list .pill:nth-child(6n+4){ animation-delay: .75s; }
  .pill-list .pill:nth-child(6n+5){ animation-delay: 1s; }
  .pill-list .pill:nth-child(6n+6){ animation-delay: 1.25s; }

  @keyframes pill-bob{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-5px); }
  }
  @media (prefers-reduced-motion: reduce){
    .pill{ animation: none; }
  }

  .help-kids{ margin: 48px 0 64px; }
  .help-kids-head{
    font-family: "Fraunces", serif;
    font-weight: 900;
    font-size: clamp(22px, 2.8vw, 28px);
    letter-spacing: -0.01em;
    margin: 0 0 24px;
  }
  .help-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
  @media (max-width: 900px){ .help-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px){ .help-grid{ grid-template-columns: 1fr; } }
  .help-grid.pop-reveal .help-card{
    opacity: 0;
    transform: translateY(70px) scale(0.7);
    transition: opacity .55s ease, transform .65s cubic-bezier(.34,1.56,.64,1);
  }
  .help-grid.pop-reveal .help-card.is-popped{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  @media (prefers-reduced-motion: reduce){
    .help-grid.pop-reveal .help-card{ opacity: 1; transform: none; transition: none; }
  }
  .help-card{
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 18px;
    padding: 20px;
    text-align: center;
    box-shadow: 5px 5px 0 var(--ink);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .help-card:hover{ transform: translateY(-4px); box-shadow: 7px 7px 0 var(--ink); }
  .help-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    border-radius: 50%;
    animation: help-float 2.6s ease-in-out infinite;
  }
  .help-icon svg{ width: 32px; height: 32px; }
  .help-card:nth-child(2) .help-icon{ animation-delay: .3s; }
  .help-card:nth-child(3) .help-icon{ animation-delay: .6s; }
  .help-card:nth-child(4) .help-icon{ animation-delay: .9s; }
  .help-card:nth-child(5) .help-icon{ animation-delay: .2s; }
  .help-card:nth-child(6) .help-icon{ animation-delay: .5s; }
  .help-card:nth-child(7) .help-icon{ animation-delay: .8s; }
  @keyframes help-float{
    0%, 100%{ transform: translateY(0) rotate(0deg); }
    50%{ transform: translateY(-8px) rotate(-4deg); }
  }
  @media (prefers-reduced-motion: reduce){ .help-icon{ animation: none; } }
  .help-card p{ margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }

  /* ---------- Chapter 4: world map ---------- */
  .worldmap-wrap{
    position: relative;
    width: 100%;
    aspect-ratio: 1871 / 1030;
    margin-top: 24px;
  }
  .worldmap-svg{ width: 100%; height: 100%; object-fit: contain; }
  .map-pin{
    position: absolute;
    display: block;
    width: 26px; height: 26px;
    margin: -13px 0 0 -13px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0;
    transform: translateY(-160px) scale(0.4);
    transition: opacity .45s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
  }
  .map-pin.is-dropped{
    opacity: 1;
    /* none, not translateY(0) scale(1): a transform on the pin would make the
       pin the containing block for the fixed card inside it, which is how the
       card ended up positioned against a pin instead of the screen. */
    transform: none;
  }
  @media (prefers-reduced-motion: reduce){
    .map-pin{ opacity: 1; transform: none; transition: none; }
  }
  .pin-dot{
    display: block;
    width: 100%; height: 100%;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--purple);
    border: 2px solid var(--ink);
    box-shadow: 0 3px 6px rgba(20,23,26,0.3);
    transition: transform .15s ease;
  }
  .map-pin::after{
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 8px; height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--yellow);
    pointer-events: none;
  }
  .map-pin:hover .pin-dot, .map-pin:focus-visible .pin-dot, .map-pin.is-active .pin-dot{
    transform: rotate(-45deg) scale(1.15);
  }
  /* The card is placed by script (see the map-pin block at the end of the page)
     so that a pin near an edge can never push it off the screen. Fixed, rather
     than anchored to the pin, is what makes that possible. */
  .map-popup{
    position: fixed;
    left: 0;
    top: 0;
    transform: translateY(6px);
    width: 270px;
    max-width: calc(100vw - 28px);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 6px 6px 0 var(--ink);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 20;
  }
  .map-pin:hover .map-popup, .map-pin:focus-visible .map-popup, .map-pin.is-active .map-popup{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  /* Each section's .wrap is its own stacking context, so an open card would be
     painted under the section that follows. Lift this one while it is open. */
  .wrap:has(.map-pin.is-active),
  .wrap:has(.map-pin:hover),
  .wrap:has(.map-pin:focus-visible){ z-index: 60; }
  .map-popup img{
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
    background: var(--bg-deep);
  }
  .map-popup strong{
    display: block;
    font-family: "Fraunces", serif;
    font-size: 15.5px;
    margin-bottom: 6px;
  }
  .map-popup-text{ display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }

  /* ---------- Closing CTA ---------- */
  .guide-end{ text-align:center; padding: 90px 0 100px; }
  .guide-end h2{ margin: 12px auto 18px; }
  .guide-end .intro{ margin: 0 auto 32px; }

  /* ---------- Footer ---------- */
  footer.site{
    padding: 60px 0 40px;
    color: var(--ink-soft);
    font-size: 14px;
  }
  footer.site .row{
    border-top: 1px solid rgba(20,23,26,0.1);
    padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
  }
  footer.site a{ color: var(--ink); text-decoration: none; margin-left: 18px; }
  footer.site a:hover{ text-decoration: underline; }

  /* ==========================================================
     Mobile polish
     Appended last so these rules win over the base styles above.
     ========================================================== */

  /* Several elements animate in rotated or scaled (the quiz bubbles and
     photos, the map pins). Their untransformed boxes stick out past the
     viewport and gave the whole page a sideways scroll on every phone. */
  html, body{ overflow-x: hidden; }
  /* `clip` rather than `hidden` where it is supported: `hidden` leaves the
     page programmatically scrollable, so focusing something near the edge
     still slid the whole layout sideways. */
  @supports (overflow: clip){ html, body{ overflow-x: clip; } }

  /* Jumping to a chapter used to land with the heading tucked under the
     sticky header. */
  .chapter-block[id]{ scroll-margin-top: 130px; }

  @media (max-width: 760px){
    /* --- Header -------------------------------------------------------
       At phone widths the brand, the "About the project" link, the
       language pill and the #GR4AI chip all wanted the same row: the link
       wrapped over the logo and the chip pushed the pill off-screen. The
       chip is decoration, so it goes first. */
    header.site{ padding-top: 12px; }
    .nav{ padding-bottom: 12px; gap: 10px; }
    .brand{ font-size: 19px; gap: 8px; }
    .brand .dot{ width: 28px; height: 28px; }
    .menu{ gap: 12px; }
    .menu a.back{ white-space: nowrap; font-size: 13px; }
    .lang-switch{ padding: 2px; }
    .lang-switch a{ min-width: 30px; padding: 5px 8px; font-size: 12px; }

    .chapter-block[id]{ scroll-margin-top: 76px; }

    /* --- Type ---------------------------------------------------------
       A few labels sat at 11–12.5px, which is small for a 7-to-12 reader. */
    .kicker{ font-size: 12.5px; }
    .gang-card p{ font-size: 13px; line-height: 1.4; }
    .flip-hint, .career-hint{ font-size: 16.5px; }

    /* --- Tap targets --------------------------------------------------
       The carousel dots are 12px squares; keep them looking that way but
       give them a finger-sized hit area. */
    .carousel-dot{ position: relative; }
    .carousel-dot::after{
      content: ""; position: absolute; inset: -14px; border-radius: 50%;
    }
    .carousel-dots{ gap: 4px; }
  }

  @media (max-width: 374px){
    /* Narrow Androids and the small iPhone SE: buy back the last few
       pixels so the About link and the language pill still share a row. */
    header.site .wrap{ padding-left: 16px; padding-right: 16px; }
    .brand{ font-size: 17px; gap: 6px; }
    .menu{ gap: 8px; }
    .menu a.back{ font-size: 12px; }
    .lang-switch a{ min-width: 26px; padding: 5px 6px; font-size: 11.5px; }
  }

  @media (max-width: 339px){
    /* Below this the About link cannot fit next to the pill in any
       language. The hero button and the footer both link there. */
    .menu a.back{ display: none; }
  }

  @media (max-width: 880px){
    /* The #GR4AI chip ran off the right edge anywhere below ~880px, tablets
       included — it is decoration, so it is the first thing to go. */
    .hashtag{ display: none; }
  }

  @media (max-width: 800px){
    /* --- Physical vs digital ------------------------------------------
       Stacked one per row, the two column headings ended up as two lone
       lines above the list. Side by side they read as the legend they are,
       and the extra gap after each digital card keeps the pairs together. */
    .compare-headings{ grid-template-columns: 1fr 1fr; gap: 10px; text-align: center; }
    .compare-headings .compare-digital-h{ grid-column: 2; }
    .compare-headings h4{ font-size: clamp(17px, 4.6vw, 24px); }
    .compare-item.is-digital{ margin-bottom: 18px; }
    /* "Sentences/Words/Numbers" has no break opportunity, so the card's
       min-content width pushed it off a 320–360px screen. */
    .compare-item{ grid-template-columns: 38px 1fr; gap: 12px; padding: 12px 14px; }
    .compare-icon{ font-size: 36px; }
    .compare-item > div{ min-width: 0; overflow-wrap: anywhere; }
  }

  @media (max-width: 700px){
    /* --- World map ----------------------------------------------------
       The popup is 240px wide and centred on its pin, so pins near either
       edge opened a card that ran off the screen. On a phone it becomes a
       sheet pinned to the bottom of the map instead. `transform: none` on
       the dropped pin is what lets the popup escape it. */
    .map-pin{ width: 30px; height: 30px; margin: -15px 0 0 -15px; }
    .map-pin.is-dropped{ transform: none; }
    .map-popup{
      position: fixed;
      left: 14px; right: 14px; bottom: 14px;
      top: auto; width: auto;
      transform: translateY(10px);
      box-shadow: 0 -6px 40px -12px rgba(20,23,26,0.45), 5px 5px 0 var(--ink);
    }
    .map-pin:hover .map-popup,
    .map-pin:focus-visible .map-popup,
    .map-pin.is-active .map-popup{ transform: translateY(0); }
    .map-popup img{ aspect-ratio: 16/7; }
    /* Each section's .wrap is position:relative with z-index:2, which makes it
       its own stacking context — so the sheet was painted under the section
       that follows. Lift this one only while a pin is open. */
    .wrap:has(.map-pin.is-active){ z-index: 60; }
    .map-popup{ z-index: 60; }
  }

  @media (max-width: 480px){
    /* --- Flip cards ---------------------------------------------------
       Stacking a full-width square image above the text forced every card
       to a 16/26 box, so the front of each card was mostly empty and six
       of them made a very long scroll. A narrower centred image buys back
       roughly a quarter of the height.
       The ratios below are the tightest that still fit the longest card
       back in all three languages — French runs longest, which is why the
       narrow tier exists. Re-check with the longest card if you add copy. */
    .flip-back.has-image .flip-back-img{ width: 52%; align-self: center; }
    .flip-back.has-image{ gap: 12px; }
    .flip-grid.has-image-cards .flip-card{ aspect-ratio: 16/19; }
  }

  @media (max-width: 343px){
    .flip-grid.has-image-cards .flip-card{ aspect-ratio: 16/22; }
  }

  .flow-step small{
    display: block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    opacity: .85;
    margin-top: 5px;
  }
  /* the sentence under a diagram is a caption, not body copy */
  .neural-box p.flow-caption{
    margin: 26px 0 0;
    max-width: 62ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
  }

  /* ---------- Dedication ---------- */
  .thanks-dedication{
    max-width: 720px; margin: 8px auto 28px; padding: 26px 8px 4px;
    border-top: 2px dashed rgba(20,23,26,0.25); text-align: center;
  }
  .dedication-kicker{
    font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); margin: 0 0 14px;
  }
  .dedication-text{
    font-family: "Fraunces", serif; font-weight: 600;
    font-size: clamp(18px, 2.4vw, 22px); line-height: 1.5;
    color: var(--ink); margin: 0; text-wrap: balance;
  }

  /* ---------- Before you begin ---------- */
  .before-start{ background: var(--paper); padding: 48px 0 8px; }
  .cloud-intro{
    display: grid; grid-template-columns: minmax(150px, 230px) 1fr;
    gap: 10px; align-items: center; max-width: 780px; margin: 0 auto 32px;
  }
  .cloud-intro img{
    width: 100%; height: auto;
    animation: cloud-intro-float 6s ease-in-out infinite;  /* schwebt dauerhaft, Jan 30.10. */
  }
  @keyframes cloud-intro-float{
    0%, 100%{ transform: translate(0, 0) rotate(0deg); }
    30%{ transform: translate(3px, -10px) rotate(1.5deg); }
    65%{ transform: translate(-3px, -4px) rotate(-1.5deg); }
  }
  @media (prefers-reduced-motion: reduce){ .cloud-intro img{ animation: none; } }
  .cloud-intro-bubble{
    position: relative; background: var(--paper); border: 3px solid var(--blue);
    border-radius: 20px; padding: 18px 22px;
  }
  .cloud-intro-bubble::after{
    content: ""; position: absolute; left: -14px; top: 50%; margin-top: -12px;
    width: 0; height: 0; border: 12px solid transparent;
    border-right-color: var(--blue); border-left: 0;
  }
  .cloud-intro-bubble p{ margin: 0; font-size: 17px; line-height: 1.5; }
  @media (max-width: 560px){
    .cloud-intro{ grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0; }
    .cloud-intro-bubble::after{ display: none; }
  }
  .before-start .info-callout{ max-width: 780px; margin-left: auto; margin-right: auto; }
  /* ---------- Danke-Abschnitt ---------- */
  #guide-thanks .thanks-card{
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--ink);
    padding: 40px 44px 40px;
    max-width: 940px;
  }
  #guide-thanks .chapter-intro{ margin: 0 0 24px; max-width: 58ch; }
  #guide-thanks .thanks-list{
    list-style: none; margin: 0; padding: 24px 0 0;
    border-top: 2px solid rgba(20,23,26,0.10);
    columns: 3; column-gap: 40px;
    font-size: 17px; line-height: 1.45;
  }
  #guide-thanks .thanks-list li{
    break-inside: avoid; position: relative;
    padding: 0 0 13px 18px; color: var(--ink);
  }
  #guide-thanks .thanks-list li::before{
    content: ""; position: absolute; left: 0; top: 0.5em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--coral);
  }
  /* Der Hinweis steht mit in der Karte — Dank und Entstehung gehoeren auf
     dieselbe Seite, wie das Impressum eines Buches. Eine Linie trennt sie,
     die Schrift ist kleiner: gelesen werden soll er trotzdem. */
  #guide-thanks .info-callout{
    background: none; border: 0; border-radius: 0; box-shadow: none;
    border-top: 2px solid rgba(20,23,26,0.10);
    padding: 24px 0 0; margin: 30px 0 0; max-width: 66ch;
  }
  #guide-thanks .info-callout p{ font-size: 15.5px; }
  #guide-thanks .info-callout-kicker{ font-size: 18px; }
  #guide-thanks .info-callout p:last-child{ margin-bottom: 0; }
  @media (max-width: 900px){
    #guide-thanks .thanks-list{ columns: 2; }
    #guide-thanks .thanks-card{ padding: 30px 26px 26px; }
  }
  @media (max-width: 560px){
    #guide-thanks .thanks-list{ columns: 1; }
  }

  /* ---------- Placeholder for a picture we don't have yet ---------- */
  .img-placeholder{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 20px;
    text-align: center;
    border: 2px dashed var(--ink);
    border-radius: 16px;
    background:
      repeating-linear-gradient(45deg, rgba(20,23,26,0.05) 0 9px, transparent 9px 18px),
      var(--paper);
  }
  .img-placeholder .emoji{ font-size: 30px; line-height: 1; }
  .img-placeholder span:last-child{
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--ink-soft);
    max-width: 26ch;
  }
  .img-pair{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 18px;
  }
  /* "Neural Networks" box: the two pictures are small animations, each with its caption laid over the bottom */
  .img-pair .img-cap{ display: block; }
  .pic{ position: relative; }
  .anim-frame{
    margin: 0; position: relative; overflow: hidden; height: 400px;
    background: var(--paper); border: 2px solid var(--ink); border-radius: 16px;
  }
  .anim-frame.dark{ background: #0d1226; }
  .anim-frame canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  /* the brain picture is shown whenever the animation does not run (no script, or less motion asked for) */
  .anim-fallback{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .anim-frame.is-live .anim-fallback{ display: none; }
  .img-caption{
    position: absolute; left: 2px; right: 2px; bottom: 2px;
    margin: 0; padding: 10px 14px;
    background: rgba(255,255,255,0.92); color: var(--ink) !important;
    border-top: 2px solid var(--ink); border-radius: 0 0 14px 14px;
    font-size: 15.5px; font-weight: 700; line-height: 1.35; text-align: center;
  }
  .neural-box p.below{ margin: 12px 0 0; font-weight: 400; font-size: 17px; line-height: 1.55; }
  @media (max-width: 560px){ .anim-frame{ height: 340px; } }
  .img-pair .img-placeholder{ aspect-ratio: 4 / 3; }
  @media (max-width: 560px){ .img-pair{ grid-template-columns: 1fr; } }
  .img-wide{ aspect-ratio: 16 / 5; max-width: 760px; margin: 24px auto 0; }

  .ext-link{
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .ext-link .ext-mark{ font-size: 0.8em; margin-left: 2px; }
  .keep-scrolling{
    margin: -8px 0 22px;
    text-align: center;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink-soft);
  }

  .card-img-todo{
    width: min(320px, 40%);
    aspect-ratio: 1/1;
    margin: 0 0 20px;
    border-radius: 12px;
  }
  #ch12 .career-grid{ grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 900px){ #ch12 .career-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px){ #ch12 .career-grid{ grid-template-columns: 1fr; } }

  /* Buttons erben die Schriftart nicht von selbst. Ohne diese Zeile fallen sie
     auf die Standardschrift des Browsers zurueck — bei den Kartenpins der
     Weltkarte hiess das: acht Professorentexte in Arial. */
  .map-pin, .carousel-arrow, .carousel-dot, .glossary-pop-close{ font-family: inherit; }

  /* h1 bis h3 haben eigene Zeilenhoehen; die h4 der Karten hatten die 1.62 des
     Fliesstextes geerbt, was bei 26 und 34 px zu locker steht. */
  .concept-card h4, .flashcard h4, .flip-front h4, .flip-back h4,
  .flip-back.has-image .flip-back-text h4, .career-card-front h4,
  .career-card-back h4, .hype-box h4, .neural-box h4, .final-quiz-box h4,
  .compare-headings h4, .capability-head, .help-kids-head, .section-subhead{
    line-height: 1.15;
  }

  /* ---------- Sprach-Globus (lg-*) ---------- */
  /* Weiche Blende beim Sprachwechsel; Browser ohne Unterstützung navigieren normal. */
  @view-transition{ navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root){ animation-duration: .3s; }
  .lg-ask{
    position: fixed; inset: 0; z-index: 200;
    display: grid; place-items: center; padding: 26px 20px;
    background: linear-gradient(180deg, rgba(247,255,247,0.93), rgba(213,226,236,0.96));
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; pointer-events: none;
    transition: opacity .35s ease;
    overflow-y: auto;
  }
  .lg-ask.is-open{ opacity: 1; pointer-events: auto; }
  .lg-ask[hidden]{ display: none !important; }
  body.lg-locked{ overflow: hidden; }

  .lg-inner{
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    width: 100%; max-width: 730px; text-align: center; margin: auto;
  }
  .lg-ask h2{
    font-family: "Fraunces", serif; font-weight: 900;
    font-size: clamp(26px, 4.6vw, 42px); line-height: 1.02; letter-spacing: -0.02em;
    margin: 0; min-height: 1.05em; color: var(--ink);
  }
  .lg-alt{ margin: 0; font-size: 13px; color: var(--ink-soft); }

  .lg-stage{
    position: relative; width: clamp(210px, 46vw, 344px); aspect-ratio: 1;
    touch-action: none; cursor: grab;
  }
  .lg-stage:active{ cursor: grabbing; }
  .lg-stage::before{
    content: ""; position: absolute; inset: 3%; border-radius: 50%;
    background: var(--ink); transform: translate(7px, 7px); z-index: 0;
    transition: opacity .25s ease;
  }
  .lg-stage.lg-flying{ z-index: 5; will-change: transform; }
  .lg-stage.lg-flying::before{ opacity: 0; }
  .lg-stage canvas{ position: relative; z-index: 1; width: 100%; height: 100%; display: block; }
  .lg-stage:focus-visible{ outline: 3px solid var(--jet); outline-offset: 8px; border-radius: 50%; }
  .lg-pins{ position: absolute; inset: 0; z-index: 2; pointer-events: none; }

  /* Der Knopf ist groesser als der Punkt, damit ein Kinderfinger ihn trifft;
     zu sehen ist nur der Punkt in seiner Mitte. */
  .lg-pin{
    position: absolute; left: 0; top: 0; transform-origin: center;
    width: 26px; height: 26px; display: grid; place-items: center;
    background: none; border: 0; padding: 0; margin: 0; line-height: 0;
    cursor: pointer; pointer-events: auto; will-change: transform;
  }
  .lg-pin .lg-dot{
    display: block; width: 10px; height: 10px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--ink); box-shadow: none;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease,
                width .18s ease, height .18s ease;
  }
  /* Der Anker jeder Sprache ist etwas groesser — auf ihn dreht die Sprachkarte. */
  .lg-pin.lg-main .lg-dot{ width: 14px; height: 14px; }
  /* Alle Laender einer Sprache leuchten gemeinsam auf. Das ist der Punkt:
     eine Sprache gehoert nicht zu einem einzigen Land. */
  .lg-pin.is-lang .lg-dot{
    width: 13px; height: 13px; background: var(--coral); box-shadow: 1px 1px 0 var(--ink);
  }
  .lg-pin.is-lang.lg-main .lg-dot{ width: 17px; height: 17px; box-shadow: 2px 2px 0 var(--ink); }
  .lg-pin .lg-lbl{
    position: absolute; left: 25px; top: 50%;
    transform: translateY(-50%) scale(.8); transform-origin: left center; opacity: 0;
    background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
    border-radius: 999px; padding: 5px 13px;
    font: 700 12.5px/1 "Inter", sans-serif; box-shadow: 2px 2px 0 var(--ink);
    white-space: nowrap; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .lg-pin.lg-flip .lg-lbl{ left: auto; right: 25px; transform-origin: right center; }
  .lg-pin:hover .lg-lbl, .lg-pin:focus-visible .lg-lbl,
  .lg-pins:not(:hover) .lg-pin.is-on .lg-lbl{
    opacity: 1; transform: translateY(-50%) scale(1);
  }
  .lg-pin.is-on .lg-dot{ background: var(--gold); transform: scale(1.45); box-shadow: 2px 2px 0 var(--ink); }
  .lg-pin.is-on .lg-lbl{ background: var(--gold); }
  /* Die Ebene der Punkte setzt das Skript je Bild; eine Regel hier haette
     keine Wirkung, weil ein style-Attribut immer gewinnt. */
  .lg-pin:focus-visible{ outline: 3px solid var(--jet); outline-offset: 4px; border-radius: 50%; }
  .lg-pin.lg-soon .lg-dot{
    width: 6px; height: 6px; background: var(--paper);
    border: 1.5px solid rgba(21,23,26,0.32); box-shadow: none;
  }
  .lg-pin.lg-soon .lg-lbl{
    left: 23px; padding: 3px 9px; font-size: 10.5px; font-weight: 600;
    color: var(--ink-soft); border-width: 1.5px; border-color: rgba(21,23,26,0.35); box-shadow: none;
  }
  .lg-pin.lg-soon.lg-flip .lg-lbl{ left: auto; right: 23px; }

  .lg-hint{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft);
    min-height: 3em; max-width: 42ch; }

  .lg-cards{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .lg-cards button{
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 116px; padding: 11px 18px 12px; cursor: pointer;
    background: var(--paper); color: var(--ink);
    border: 2px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink);
    font-family: "Inter", sans-serif;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .lg-cards .lg-hi{
    font-family: "Fraunces", serif; font-weight: 900; font-size: 22px;
    line-height: 1; letter-spacing: -0.02em;
  }
  .lg-cards .lg-nm{ font: 600 12px/1 "Inter", sans-serif; color: var(--ink-soft); letter-spacing: .02em; }
  .lg-cards button:hover{ transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
  .lg-cards button[aria-pressed="true"]{ background: var(--gold); box-shadow: 6px 6px 0 var(--ink); transform: translate(-1px,-1px); }
  .lg-cards button[aria-pressed="true"] .lg-nm{ color: var(--ink); }
  .lg-cards button:focus-visible{ outline: 3px solid var(--jet); outline-offset: 3px; }

  .lg-later{
    background: none; border: 0; padding: 4px; cursor: pointer;
    color: var(--ink-soft); font: 500 12.5px/1 "Inter", sans-serif; text-decoration: underline;
  }
  .lg-later:focus-visible{ outline: 3px solid var(--jet); outline-offset: 2px; }

  /* Globus im Menü */
  .lg-headbtn{
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 11px 3px 4px; border-radius: 999px; cursor: pointer;
    background: var(--paper); border: 1px solid rgba(20,23,26,0.10);
    font: 700 12px/1 "Inter", sans-serif; color: var(--ink);
  }
  .lg-headbtn canvas{
    width: 26px; height: 26px; display: block; border-radius: 50%;
    border: 1.5px solid var(--ink);
  }
  .lg-headbtn:focus-visible{ outline: 3px solid var(--jet); outline-offset: 2px; }
  @media (max-width: 420px){
    .lg-headbtn{ padding: 3px 8px 3px 3px; gap: 5px; font-size: 11.5px; }
    .lg-headbtn canvas{ width: 22px; height: 22px; }
  }
  @media (max-width: 560px){
    .lg-cards button{ min-width: 92px; padding: 9px 12px 10px; }
    .lg-cards .lg-hi{ font-size: 19px; }
  }
  @media (prefers-reduced-motion: reduce){
    .lg-ask, .lg-pin .lg-dot, .lg-pin .lg-lbl, .lg-cards button{ transition-duration: .01ms !important; }
  }

  /* ---------- Wörtersammlung (gw-*) ----------
     Ohne JavaScript bleibt das Glossar die Liste, die es war. Erst das Skript
     setzt .gw-album auf die <dl> und macht daraus die Sammelkarten. */
  .gw-bar{
    max-width: 1180px; margin: 0 0 22px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px;
  }
  .gw-count{
    margin: 0; font-size: 17px; font-weight: 600; color: var(--ink);
    flex: 1 1 260px; min-width: 0;
  }
  .gw-count b{ font-family: "Fraunces", serif; font-weight: 900; font-size: 19px; }
  .gw-track{
    flex: 1 1 200px; height: 18px; border: 2px solid var(--ink);
    border-radius: 999px; background: var(--paper); overflow: hidden;
  }
  .gw-fill{
    display: block; height: 100%; width: 0;
    background: var(--gold); border-right: 2px solid var(--ink);
    transition: width .45s cubic-bezier(.4,0,.2,1);
  }
  .gw-fill.is-full{ background: var(--teal); border-right: 0; }
  .gw-tools{ display: flex; gap: 10px; flex: 0 0 auto; }
  .gw-search{
    font: 400 15.5px/1 "Inter", sans-serif; color: var(--ink);
    background: var(--paper); border: 2px solid var(--ink);
    border-radius: 999px; padding: 9px 16px; width: 190px; max-width: 46vw;
  }
  .gw-search::placeholder{ color: var(--ink-soft); }
  .gw-search:focus-visible, .gw-all:focus-visible{ outline: 3px solid var(--jet); outline-offset: 2px; }
  .gw-all{
    font: 700 14px/1 "Inter", sans-serif; cursor: pointer;
    background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
    border-radius: 999px; padding: 9px 16px; white-space: nowrap;
  }
  .gw-all:hover{ background: var(--gold); }

  .glossary-list.gw-album{
    max-width: none; margin: 0; background: none; border: 0; box-shadow: none;
    border-radius: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 14px; align-items: start; grid-auto-flow: dense;
  }
  .gw-album .glossary-entry{
    position: relative; padding: 0; margin: 0; border-bottom: 0;
    border-radius: 16px; background: var(--paper);
    border: 2px dashed rgba(20,23,26,0.30);
    transition: border-color .18s ease, box-shadow .18s ease;
  }
  .gw-album .glossary-entry.gw-have{
    border-style: solid; border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .gw-album .glossary-entry.is-open{ grid-column: span 2; }
  @media (max-width: 560px){
    .gw-album .glossary-entry.is-open{ grid-column: auto; }
  }
  .gw-album .glossary-entry.gw-hide{ display: none; }

  .gw-album .glossary-entry dt{ margin: 0; padding: 0; }
  .gw-word{
    display: block; width: 100%; text-align: left; cursor: pointer;
    background: none; border: 0; border-radius: 16px;
    font-family: "Fraunces", serif; font-weight: 800; font-size: 17px;
    line-height: 1.25; color: var(--ink-soft);
    padding: 14px 44px 15px 15px;
  }
  .gw-album .glossary-entry.gw-have .gw-word{ color: var(--ink); }
  .gw-word:focus-visible{ outline: 3px solid var(--jet); outline-offset: -3px; }
  /* Dieselbe gepunktete Unterstreichung wie bei den Wörtern im Text — so ist
     auf einen Blick klar, dass die Karte sich öffnen lässt. */
  .gw-word span{
    text-decoration: underline; text-decoration-style: dotted;
    text-decoration-thickness: 1px; text-underline-offset: 3px;
    text-decoration-color: rgba(20,23,26,0.45);
  }
  .gw-album .glossary-entry.gw-have .gw-word span{ text-decoration-color: var(--ink); }
  .gw-word:hover span, .gw-word:focus-visible span{ text-decoration-thickness: 2px; }

  .gw-say{
    position: absolute; top: 10px; right: 10px;
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: var(--paper); border: 1.5px solid rgba(20,23,26,0.28);
    font-size: 13px; line-height: 1; padding: 0;
  }
  .gw-album .glossary-entry.gw-have .gw-say{ border-color: var(--ink); }
  .gw-say:hover{ background: var(--gold); }
  .gw-say:focus-visible{ outline: 3px solid var(--jet); outline-offset: 2px; }
  .gw-say.is-speaking{ background: var(--gold); }

  .gw-album .glossary-entry dd{
    display: none; margin: 0; padding: 0 15px 15px;
    font-size: 17px; line-height: 1.5; color: var(--ink-soft);
  }
  .gw-album .glossary-entry.is-open dd,
  .gw-album .glossary-entry:target dd{ display: block; }
  .gw-album .glossary-entry:target{ border-style: solid; border-color: var(--ink); }

  /* ---- Gruppen nach Kapiteln ---- */
  .gw-groups{ display: flex; flex-direction: column; gap: 30px; }
  .gw-head{
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px; line-height: 1.2;
  }
  .gw-head .chapter-num{
    width: 34px; height: 34px; font-size: 15px; margin: 0; flex: none;
  }
  .gw-head .gw-title{
    font-family: "Fraunces", serif; font-weight: 800; font-size: 19px;
    color: var(--ink); line-height: 1.2;
  }
  .gw-head .gw-score{
    font: 700 13px/1 "Inter", sans-serif; color: var(--ink-soft);
    border: 1.5px solid rgba(20,23,26,0.28); border-radius: 999px;
    padding: 5px 10px; white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  .gw-group.is-done .gw-score{
    background: var(--teal); border-color: var(--ink); color: var(--ink);
  }
  .gw-group.is-done .chapter-num{ background: var(--teal); }
  .gw-group.gw-hide{ display: none; }

  .gw-empty{
    margin: 18px 0 0; font-size: 15.5px; color: var(--ink-soft);
  }
  @media (prefers-reduced-motion: reduce){
    .gw-fill{ transition: none; }
  }

  /* ---------- Mobile fixes (pre-check 23.10.2026) ----------
     B1 the farewell card's inline two-column grid beat the one-column phone rule
     B2 search box + "show all" button could not shrink and ran off the screen
     B3 the rotated decorative arrows in chapter 1 lay over the cards and ate taps on glossary words
     B4 the dots' enlarged tap areas overlapped, so a tap chose the next card
     B5 small tap targets get a larger invisible hit area (no visual change)
     B6 the quiz question scrolls into view below the sticky header
     B7 language dialog on landscape phones: smaller globe so the language cards fit
     B8 16px inputs, so iOS does not zoom in on focus */
  .compare-arrow{ pointer-events: none; }
  .final-quiz-screen{ scroll-margin-top: 84px; }
  .glossary-pop-close{ width: 44px; height: 44px; top: 2px; right: 2px; }
  .gw-say::after{ content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  .lg-later{ padding: 14px 10px; }
  .gw-search{ font-size: 16px; }
  @media (max-width: 760px){
    .carousel-dots{ gap: 20px; }
    .carousel-dot::after{ inset: -14px -10px; }
  }
  @media (max-width: 700px){
    #guide-farewell .quiz-card{ grid-template-columns: 1fr !important; }
  }
  @media (max-width: 560px){
    .gw-tools{ flex: 1 1 100%; flex-wrap: wrap; min-width: 0; }
    .gw-search{ flex: 1 1 100%; width: auto; max-width: none; }
  }
  @media (max-height: 500px) and (orientation: landscape){
    .lg-stage{ width: clamp(140px, 42vh, 344px); }
    .lg-inner{ gap: 10px; }
  }

  /* ---------- Kapitel-Menü (cn-*) ----------
     Ein Knopf im Kopf zeigt, in welchem Kapitel man gerade ist, und öffnet
     eine Liste aller Kapitel mit Titel. Am Schreibtisch klappt sie unter dem
     Knopf auf, am Telefon kommt sie als Blatt von unten. Ohne JavaScript
     bleiben die Zahlen 01–15 stehen. Überarbeitet nach dem UX-Panel vom
     26.10.2026 (docs/review/ux-panel-chapter-picker-2026-10-26.md). */
  :root{
    --cn-fs-xs: 12px;  --cn-fs-s: 15px;  --cn-fs-m: 16px;  --cn-fs-l: 24px;
    --cn-hover: #FFF5C2;               /* helles Gold */
    --cn-line: rgba(21,23,26,0.30);
    --cn-ring: var(--ink);
  }
  .cn-ready .menu .chapter-links{ display: none; }

  /* ---- Knopf ---- */
  .cn-btn{
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 46px; width: 320px; max-width: 100%;
    padding: 5px 14px 5px 5px;
    background: var(--paper); color: var(--ink);
    border: 2px solid var(--ink); border-radius: 999px;
    box-shadow: 3px 3px 0 var(--ink);
    font: 700 var(--cn-fs-s)/1.2 "Inter", system-ui, sans-serif;
    cursor: pointer; text-align: left;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .cn-btn:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
  .cn-btn:focus-visible{ outline: 3px solid var(--cn-ring); outline-offset: 3px; }
  .cn-badge{
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--cn-c, var(--gold)); color: var(--cn-fg, var(--ink));
    border: 2px solid var(--ink);
    font: 900 var(--cn-fs-s)/1 "Fraunces", Georgia, serif;
  }
  .cn-btn .cn-badge{ transition: background-color .25s ease; }
  .cn-btn .cn-badge-book{ display: none; background: var(--gold); }
  .cn-btn-text{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cn-btn-short{ display: none; }
  .cn-caret{ flex: none; width: 14px; height: 14px; transition: transform .2s ease; }
  .cn-btn[aria-expanded="true"] .cn-caret{ transform: rotate(180deg); }
  .cn-btn.cn-bump .cn-badge{ animation: cn-bump .45s ease; }
  @keyframes cn-bump{ 0%{ transform: scale(1); } 40%{ transform: scale(1.25) rotate(-8deg); } 100%{ transform: scale(1); } }

  /* ---- Liste ---- */
  .cn-backdrop{
    position: fixed; inset: 0; z-index: 119;
    background: rgba(21,23,26,0.28);
    touch-action: none;
    animation: cn-fade .18s ease;
  }
  .cn-panel{
    position: fixed; z-index: 120;
    top: 96px; left: 24px;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 120px);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--paper);
    border: 2px solid var(--ink); border-radius: 26px;
    box-shadow: 7px 7px 0 var(--ink);
    padding: 0 20px 18px;
    animation: cn-drop .2s cubic-bezier(.2,.9,.3,1.2);
    transform-origin: top left;
  }
  .cn-backdrop[hidden], .cn-panel[hidden]{ display: none; }
  @keyframes cn-fade{ from{ opacity: 0; } }
  @keyframes cn-drop{ from{ opacity: 0; transform: translateY(-8px) scale(.97); } }
  @keyframes cn-rise{ from{ transform: translateY(100%); } }

  /* Kopf der Liste bleibt beim Scrollen stehen: Titel, Schließen, Fortschritt. */
  .cn-top{
    position: sticky; top: 0; z-index: 2;
    margin: 0 -20px; padding: 18px 20px 12px;
    background: var(--paper);
  }
  .cn-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .cn-grab{ display: none; }
  .cn-h{
    margin: 0;
    font: 900 var(--cn-fs-l)/1.15 "Fraunces", Georgia, serif;
    letter-spacing: -0.01em;
  }
  .cn-x{
    flex: none; width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--paper); color: var(--ink);
    border: 2px solid var(--ink); cursor: pointer;
    font-size: 20px; line-height: 1;
  }
  .cn-x:focus-visible{ outline: 3px solid var(--cn-ring); outline-offset: 2px; }

  .cn-progress{ display: flex; align-items: center; gap: 12px; margin: 8px 0 0; }
  .cn-bar{
    flex: 0 0 110px; height: 12px; border-radius: 999px;
    background: var(--bg-deep); border: 2px solid var(--ink); overflow: hidden;
  }
  .cn-fill{ display: block; height: 100%; width: 0; background: var(--coral); transition: width .4s ease; }
  .cn-fill.is-full{ background: var(--quiz-green); }
  .cn-count{ margin: 0; font-size: var(--cn-fs-s); color: var(--ink-soft); }

  /* „Als Nächstes“: ein Tipp zum folgenden Kapitel. */
  .cn-next{
    display: flex; align-items: center; gap: 12px;
    margin: 2px 0 12px; padding: 10px 14px 10px 10px;
    border: 2px solid var(--ink); border-radius: 18px;
    background: var(--bg-deep); color: var(--ink); text-decoration: none;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .cn-next[hidden]{ display: none; }
  .cn-next-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .cn-next-k{ font-size: var(--cn-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
  .cn-next-t{ font-size: var(--cn-fs-m); font-weight: 700; line-height: 1.25; }
  .cn-next-go{ flex: none; font-size: 22px; font-weight: 900; }
  .cn-next:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
  .cn-next:focus-visible{ outline: 3px solid var(--cn-ring); outline-offset: 3px; }

  .cn-list{ list-style: none; margin: 0; padding: 0; }
  /* Zwei Spalten, die sich nicht gegenseitig strecken: 1–8 links, 9–15 rechts. */
  .cn-chapters{ columns: 2; column-gap: 12px; }
  .cn-chapters li{ break-inside: avoid; margin-bottom: 2px; }
  .cn-extras{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 12px; }
  .cn-item{
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 6px 10px 6px 6px;
    border: 2px solid transparent; border-radius: 16px;
    color: var(--ink); text-decoration: none;
    font-size: var(--cn-fs-m); font-weight: 600; line-height: 1.25;
  }
  .cn-item:focus-visible{ outline: 3px solid var(--cn-ring); outline-offset: 2px; }
  .cn-item .cn-badge{ width: 36px; height: 36px; }
  .cn-txt{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .cn-here{
    display: none; align-self: flex-start;
    padding: 2px 8px; border-radius: 999px;
    background: var(--ink); color: var(--paper);
    font-size: var(--cn-fs-xs); font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  }
  .cn-tick{
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    background: var(--quiz-green); color: var(--paper);
    font-size: 14px; font-weight: 900; line-height: 1;
    transform: rotate(-8deg);
  }
  .cn-item.is-seen .cn-tick{ display: inline-flex; }
  .cn-item[aria-current]{ background: var(--gold); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
  .cn-item[aria-current] .cn-here{ display: inline-block; }
  .cn-item[aria-current] .cn-badge.is-gold{ background: var(--paper); }
  .cn-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .cn-group{
    margin: 12px 0 8px; padding-top: 12px;
    border-top: 2px dashed var(--cn-line);
    font-size: var(--cn-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .cn-about{ display: none; }
  /* Kein Fokusring, wenn die Liste mit Finger oder Maus geöffnet wurde. */
  .cn-by-pointer .cn-item:focus:not(:focus-visible), .cn-by-pointer .cn-item:focus{ outline: none; }

  @media (hover: hover){
    .cn-btn:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
    .cn-x:hover{ background: var(--gold); }
    .cn-item:hover{ background: var(--cn-hover); border-color: var(--cn-line); }
    .cn-item[aria-current]:hover{ background: var(--gold); border-color: var(--ink); }
    .cn-next:hover{ background: var(--cn-hover); }
  }

  /* Großer „Als Nächstes“-Knopf am Ende jedes Kapitels. Dunkel, damit er sich
     von den weißen Antwortkarten der Quizfragen darüber abhebt. */
  .cn-endnext{ display: flex; justify-content: center; margin-top: 56px; }
  .cn-endnext .cn-next{
    width: min(560px, 100%); margin: 0; gap: 14px;
    padding: 14px 14px 14px 12px; border-radius: 22px;
    background: var(--jet); color: var(--paper); border-color: var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
  }
  .cn-endnext .cn-badge{ width: 46px; height: 46px; font-size: 18px; border-color: var(--paper); }
  .cn-endnext .cn-next-k{ color: var(--gold); }
  .cn-endnext .cn-next-t{ font-size: 18px; color: var(--paper); }
  .cn-endnext .cn-next-go{
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gold); color: var(--ink); border: 2px solid var(--ink);
    font-size: 22px; transition: transform .15s ease;
  }
  .cn-endnext .cn-next:focus-visible{ outline: 3px solid var(--ink); outline-offset: 4px; box-shadow: 5px 5px 0 var(--ink), 0 0 0 3px var(--paper); }
  @media (hover: hover){
    .cn-endnext .cn-next:hover{ background: #3A424B; }
    .cn-endnext .cn-next:hover .cn-next-go{ transform: translateX(4px); }
  }
  @media (max-width: 760px){ .cn-endnext{ margin-top: 40px; } .cn-endnext .cn-next-t{ font-size: 17px; } }

  /* ---- Schreibtisch: Kopf in einer Zeile, damit die ganze Liste ohne Scrollen passt ---- */
  @media (min-width: 761px){
    .cn-top{ display: flex; align-items: center; gap: 18px; padding: 16px 20px 12px; }
    .cn-head{ display: contents; }
    .cn-h{ order: 1; }
    .cn-progress{ order: 2; flex: 1; margin: 0; }
    .cn-x{ order: 3; }
    .cn-item{ min-height: 44px; padding: 4px 10px 4px 5px; }
    .cn-item .cn-badge{ width: 34px; height: 34px; }
    .cn-next{ padding: 7px 14px 7px 8px; margin-bottom: 10px; }
    .cn-group{ margin-top: 8px; padding-top: 10px; margin-bottom: 4px; }
  }

  /* ---- Telefon: Knopf ---- */
  @media (max-width: 760px){
    .cn-ready .menu a.back{ display: none; }
    .cn-btn{ width: auto; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px; box-shadow: 2px 2px 0 var(--ink); }
    .cn-btn .cn-badge{ width: 32px; height: 32px; }
    .cn-btn .cn-badge-num{ display: none; }
    .cn-btn .cn-badge-book{ display: inline-flex; }
    .cn-btn-long{ display: none; }
    .cn-btn-short{ display: inline; }
  }
  @media (max-width: 339px){
    .cn-btn{ gap: 6px; padding-right: 8px; }
    .cn-btn .cn-badge{ width: 28px; height: 28px; }
  }

  /* ---- Telefon (auch quer): Liste als Blatt von unten ---- */
  @media (max-width: 760px), (pointer: coarse) and (max-height: 500px){
    .cn-panel{
      top: auto !important; left: 0 !important; right: 0; bottom: 0;
      width: auto; max-height: 88vh !important; max-height: 88dvh !important;
      border-radius: 26px 26px 0 0; border-bottom: 0;
      box-shadow: 0 -6px 0 var(--ink);
      padding: 0 16px calc(18px + env(safe-area-inset-bottom));
      animation: cn-rise .26s cubic-bezier(.2,.8,.3,1);
    }
    .cn-top{ margin: 0 -16px; padding: 6px 16px 10px; touch-action: none; cursor: grab; }
    .cn-head{ flex-wrap: wrap; }
    .cn-grab{ display: flex; justify-content: center; flex: 0 0 100%; padding: 4px 0 6px; }
    .cn-grab::before{ content: ""; width: 48px; height: 5px; border-radius: 999px; background: var(--cn-line); }
    .cn-h{ font-size: 22px; }
    .cn-x{ width: 48px; height: 48px; }
    .cn-bar{ flex-basis: 72px; }
    .cn-chapters{ columns: 1; }
    .cn-extras{ grid-template-columns: 1fr; gap: 2px; }
    .cn-item{ min-height: 54px; }
    .cn-panel.is-dragging{ transition: none; animation: none; }
    .cn-about{
      display: flex; align-items: center; justify-content: center; gap: 8px;
      margin: 16px 0 0; min-height: 48px; border-radius: 999px;
      border: 2px solid var(--ink); background: var(--bg-deep);
      color: var(--ink); font-weight: 700; font-size: var(--cn-fs-m); text-decoration: none;
    }
  }
  .cn-lock{ overflow: hidden !important; }
  @media (prefers-reduced-motion: reduce){
    .cn-panel, .cn-backdrop, .cn-btn.cn-bump .cn-badge{ animation: none !important; }
    .cn-btn, .cn-caret, .cn-fill{ transition: none; }
  }
  /* ---------- Die Freunde als Kartenstapel (gd-*) ----------
     Statt acht Karten nebeneinander liegt ein Stapel: wischen oder ziehen
     blättert weiter, die Gesichter darunter springen direkt zu einem Kind.
     Jede Karte zeigt, in welchen Kapiteln man das Kind wiedertrifft. Ohne
     JavaScript bleibt das Raster stehen. */
  .gd-ready .gang-grid{ display: none; }
  .gd{
    margin: 36px auto 0;
    display: flex; flex-direction: column; align-items: center; gap: 18px;
  }
  .gd-stage{
    display: flex; align-items: center; justify-content: center; gap: 22px;
    width: 100%;
  }
  .gd-deck{
    position: relative;
    display: grid;
    width: min(360px, 100%);
    outline: none;
  }
  .gd-deck:focus-visible{ outline: 3px solid var(--coral); outline-offset: 10px; border-radius: 20px; }
  .gd .gang-card{
    grid-area: 1 / 1;
    border-radius: 20px;
    box-shadow: 6px 6px 0 var(--ink);
    display: flex; flex-direction: column;
    user-select: none; -webkit-user-select: none;
    touch-action: pan-y;
    transition: transform .38s cubic-bezier(.2,.8,.25,1), opacity .3s ease;
    will-change: transform;
  }
  .gd .gang-card img{ -webkit-user-drag: none; pointer-events: none; }
  .gd .gang-card:hover img{ transform: none; }
  .gd .gang-card[data-pos="0"]{ z-index: 10; cursor: grab; }
  .gd .gang-card.is-drag{ cursor: grabbing; transition: none; }
  .gd .gang-card[data-pos="1"]{ z-index: 9; transform: translate(16px, 12px) rotate(4deg) scale(.96); }
  .gd .gang-card[data-pos="2"]{ z-index: 8; transform: translate(-16px, 20px) rotate(-4deg) scale(.92); }
  .gd .gang-card[data-pos="hide"]{ z-index: 1; opacity: 0; transform: translate(0, 20px) scale(.9); pointer-events: none; }
  .gd .gang-card:not([data-pos="0"]){ pointer-events: none; }
  .gd .gang-card:not([data-pos="0"]) .gd-chips{ visibility: hidden; }
  .gd .gang-tag{ font-size: 19px; padding: 8px 10px; }
  .gd .gang-card p{ font-size: 16px; line-height: 1.4; padding: 12px 16px 6px; color: var(--ink); }
  .gd-chips{
    margin-top: auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px;
    padding: 6px 12px 16px;
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  }
  .gd-chips > span{ flex-basis: 100%; text-align: center; }
  .gd-chips a{
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--gd-c, var(--gold)); color: var(--ink);
    border: 2px solid var(--ink);
    font: 900 13.5px/1 "Fraunces", Georgia, serif; text-decoration: none;
    transition: transform .12s ease;
  }
  .gd-chips a:hover{ transform: translateY(-2px) rotate(-6deg); }
  .gd-chips a:focus-visible{ outline: 3px solid var(--coral); outline-offset: 2px; }

  .gd-arrow{
    flex: none; width: 52px; height: 52px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--paper); color: var(--ink);
    border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .gd-arrow svg{ width: 22px; height: 22px; }
  .gd-arrow:hover{ background: var(--gold); }
  .gd-arrow:active{ transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
  .gd-arrow:focus-visible{ outline: 3px solid var(--coral); outline-offset: 3px; }

  .gd-faces{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
  .gd-face{
    width: 48px; height: 48px; padding: 0; border-radius: 50%; overflow: hidden;
    border: 3px solid var(--gd-c, var(--paper)); background: var(--paper);
    box-shadow: 0 0 0 2px var(--ink);
    cursor: pointer; opacity: .62;
    transition: transform .2s ease, opacity .2s ease;
  }
  .gd-face img{ width: 100%; height: 100%; object-fit: cover; display: block; }
  .gd-face:hover{ opacity: 1; transform: translateY(-2px); }
  .gd-face[aria-current="true"]{ opacity: 1; transform: scale(1.18); box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); }
  .gd-face:focus-visible{ outline: 3px solid var(--coral); outline-offset: 3px; }
  .gd-hint{ margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
  .gd-hint b{ color: var(--ink); }
  .gd-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* Beim ersten Anblick wackelt die oberste Karte einmal: man kann sie bewegen. */
  .gd .gang-card.gd-nudge{ animation: gd-nudge 1.1s ease .2s 1; }
  @keyframes gd-nudge{
    0%, 100%{ transform: none; }
    30%{ transform: translateX(-26px) rotate(-5deg); }
    60%{ transform: translateX(14px) rotate(3deg); }
  }

  @media (max-width: 760px){
    .gd{ margin-top: 28px; gap: 14px; }
    .gd-stage{ gap: 0; }
    .gd-deck{ width: min(300px, calc(100% - 28px)); }
    .gd-stage .gd-arrow{ display: none; }
    .gd-nav{ display: flex; align-items: center; gap: 16px; }
    .gd .gang-card p{ font-size: 15.5px; }
    .gd-face{ width: 34px; height: 34px; border-width: 2px; }
    .gd-faces{ gap: 6px; flex-wrap: nowrap; }
  }
  @media (max-width: 374px){
    .gd-face{ width: 29px; height: 29px; }
    .gd-faces{ gap: 4px; }
  }
  @media (min-width: 761px){ .gd-nav .gd-arrow{ display: none; } .gd-nav{ display: flex; } }
  @media (prefers-reduced-motion: reduce){
    .gd .gang-card, .gd-face, .gd-chips a{ transition: none; }
    .gd .gang-card.gd-nudge{ animation: none; }
  }

  /* ---------- Kopfzeile, ruhiger (26.10.2026) ----------
     Vorher: blaugraue Leiste über dem gelben Hero, ein 320 px breiter
     Kapitel-Knopf mitten im Raum, daneben zwei weiche Pillen in einem
     anderen Stil und rechts außen der #GR4AI-Chip. Jetzt: Marke links,
     alle Bedienelemente rechts in einer Gruppe, Kapitel-Knopf und Globus
     im selben Tinten-Stil wie die Knöpfe auf der Seite, gleich hoch. */
  header.site{
    padding: 0;
    background: rgba(247,255,247,0.94);   /* --bg statt Blaugrau */
    border-bottom: 1.5px solid rgba(20,23,26,0.12);
  }
  .nav{ padding-top: 12px; padding-bottom: 12px; border-bottom: 0; gap: 16px; }
  .brand .dot{ width: 38px; height: 38px; }
  .hashtag{ display: none; }               /* nur Dekoration, wiederholte die Marke */
  .menu{ gap: 12px; margin-left: auto; }
  /* „Über das Projekt“ ist zweitrangig: leise, grau, durch einen Strich von
     den beiden Wählern getrennt. Kapitel und Sprache sind die Hauptsache. */
  .cn-ready .menu a.back{
    order: -1; margin-right: 6px; padding-right: 18px;
    border-right: 1.5px solid rgba(20,23,26,0.14);
    font-size: 14px; font-weight: 500; color: var(--ink-soft);
  }
  .menu a.back:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }

  .cn-btn{ min-height: 46px; box-shadow: 3px 3px 0 var(--ink); }
  @media (min-width: 761px){ .cn-btn{ width: 272px; } }

  .lg-headbtn{
    min-height: 46px; gap: 8px;
    padding: 5px 14px 5px 5px;
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    font-size: 14px; letter-spacing: .05em;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .lg-headbtn canvas{ width: 32px; height: 32px; border-width: 2px; }
  .lg-headbtn:active{ transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
  @media (hover: hover){
    .cn-btn:hover, .lg-headbtn:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); }
  }

  @media (max-width: 760px){
    header.site{ padding: 0; }
    .nav{ padding-top: 10px; padding-bottom: 10px; gap: 10px; }
    .brand .dot{ width: 30px; height: 30px; }
    .menu{ gap: 8px; }
    .cn-btn, .lg-headbtn{ min-height: 44px; }
    .lg-headbtn{ padding: 4px 12px 4px 4px; gap: 7px; font-size: 13px; }
    .lg-headbtn canvas{ width: 32px; height: 32px; }
  }
  @media (max-width: 374px){
    .lg-headbtn{ padding: 4px 9px 4px 4px; gap: 5px; font-size: 12px; }
    .lg-headbtn canvas{ width: 28px; height: 28px; }
  }

  /* Zweizeilige Marke: „GR4AI“, darunter klein der ausgeschriebene Titel.
     Erst ab Tablet-Breite, am Telefon fehlt der Platz. */
  .brand-text{ display: flex; flex-direction: column; line-height: 1; }
  .brand-sub{
    margin-top: 4px;
    font: 600 12px/1.1 "Inter", system-ui, sans-serif;
    letter-spacing: .01em; color: var(--ink-soft);
    white-space: nowrap;
  }
  @media (max-width: 760px){ .brand-sub{ display: none; } }


  /* Der Globus bekommt denselben Pfeil wie der Kapitel-Knopf, damit beide als
     Auswahl erkennbar sind. Auf ganz schmalen Telefonen fehlt der Platz. */
  .lg-headbtn::after{
    content: ""; flex: none; width: 14px; height: 14px; margin-left: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5 7 9.5 11.5 5' fill='none' stroke='%2315171A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  @media (max-width: 400px){ .lg-headbtn::after{ display: none; } }
  /* Unter 360 px passen Name, Kapitel-Knopf und Globus nicht in eine Zeile:
     dort steht nur die Wolke als Logo. */
  @media (max-width: 359px){ .brand-text{ display: none; } }

  /* Schmale Telefone (bis 400 px, z. B. iPhone mini/SE mit 375 px): etwas
     engere Abstände, damit der Globus nicht an den Rand stößt. */
  @media (max-width: 400px){
    .nav{ gap: 8px; }
    .menu{ gap: 6px; }
    .brand{ gap: 6px; font-size: 18px; }
    .lg-headbtn{ padding: 4px 9px 4px 4px; gap: 5px; }
  }

  /* ---------- Die Wolke reagiert auf die Antwort (qz-*, 26.10.2026) ----------
     Vorher sah jede Wahl gleich aus: alle falschen Antworten rot, die richtige
     grün, darunter dieselbe Wolke. Ein Kind sah nicht, welche es selbst
     gewählt hatte. Jetzt: die eigene Wahl bleibt stark, die übrigen falschen
     treten zurück; richtig gewählt springt die Wolke vor Freude und Konfetti
     sprüht aus dem Knopf, falsch gewählt schüttelt sie freundlich den Kopf.
     Die Überschrift der Antwort sagt „Richtig!“ oder „Nicht ganz!“. */
  .qz-done .quiz-option.is-incorrect:not(.qz-picked){
    background: var(--paper); color: var(--ink-soft);
    border-color: rgba(21,23,26,0.28); border-width: 2px;
    box-shadow: none; opacity: .7;
  }
  .qz-done .quiz-option.is-incorrect:not(.qz-picked)::after{ display: none; }
  .quiz-option.qz-picked{ animation: qz-pop .35s cubic-bezier(.3,1.6,.5,1); }
  @keyframes qz-pop{ 0%{ transform: scale(.96); } 60%{ transform: scale(1.03); } 100%{ transform: none; } }

  .qz-yes .quiz-cloud{ animation: qz-cheer 1s cubic-bezier(.3,1.3,.5,1) both, quiz-cloud-float 4.5s ease-in-out 1s infinite; }
  @keyframes qz-cheer{
    0%  { transform: translateY(30px) scale(.6); opacity: 0; }
    30% { transform: translateY(-28px) scale(1.08) rotate(-8deg); opacity: 1; }
    50% { transform: translateY(0) scale(1.06, .94) rotate(6deg); }
    68% { transform: translateY(-12px) rotate(-4deg); }
    84% { transform: translateY(0) scale(1.02, .98); }
    100%{ transform: none; }
  }
  .qz-no .quiz-cloud{ animation: qz-hmm 1.2s ease-out both, quiz-cloud-float 4.5s ease-in-out 1.2s infinite; }
  @keyframes qz-hmm{
    0%  { transform: translateY(20px) scale(.7); opacity: 0; }
    28% { transform: none; opacity: 1; }
    42% { transform: rotate(-9deg); }
    56% { transform: rotate(8deg); }
    70% { transform: rotate(-5deg); }
    84% { transform: rotate(3deg); }
    100%{ transform: none; }
  }

  .quiz-answer-bubble strong.qz-label{ animation: qz-pop .4s cubic-bezier(.3,1.6,.5,1) both; transform-origin: left center; }
  .qz-yes .quiz-answer-bubble strong{ color: var(--quiz-green); }
  .qz-no  .quiz-answer-bubble strong{ color: var(--ink); }
  @media (max-width: 560px){ .quiz-answer-bubble strong.qz-label{ transform-origin: center; } }

  /* Kleines Konfetti aus dem gewählten Knopf (das große bleibt der Schlussprüfung) */
  .qz-burst{ position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 5; }
  .qz-burst i{
    position: absolute; left: -5px; top: -4px; width: 10px; height: 8px; border-radius: 2px;
    animation: qz-fly .95s cubic-bezier(.2,.7,.4,1) forwards;
  }
  @keyframes qz-fly{
    0%  { transform: translate(0,0) rotate(0) scale(.6); opacity: 1; }
    60% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 1; }
    100%{ transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 46px)) rotate(calc(var(--r) * 1.6)); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .qz-yes .quiz-cloud, .qz-no .quiz-cloud, .quiz-option.qz-picked, .quiz-answer-bubble strong.qz-label{ animation: none; }
    .qz-burst{ display: none; }
  }

  /* ---------- Paare finden in Kapitel 1 (pg-*, 26.10.2026) ----------
     Aus der Tabelle „physisch → digital“ wird ein Spiel: die digitalen Karten
     liegen gemischt als Chips oben, ihre Plätze sind leer. Ziehen (Maus,
     Finger, Stift) oder antippen und dann den Platz antippen. Das Feld bleibt
     beim Scrollen oben stehen, damit die Chips zu sehen sind. Ohne JavaScript
     bleibt die Tabelle wie bisher. */
  .pg-panel{
    position: sticky; top: 80px; z-index: 20;
    margin: 0 0 26px;
    background: var(--paper);
    border: 2px solid var(--ink); border-radius: 18px;
    box-shadow: 4px 4px 0 var(--ink);
    padding: 14px 18px 12px;
  }
  .pg-title{ margin: 0; font: 900 20px/1.2 "Fraunces", Georgia, serif; color: var(--ink); }
  .pg-how{ margin: 4px 0 12px; font-size: 15px; line-height: 1.4; color: var(--ink-soft); }
  .pg-chips{ display: flex; flex-wrap: wrap; gap: 10px; min-height: 44px; }
  .pg-chip{
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 6px 16px 6px 10px;
    background: #FFE9E9; color: var(--ink);
    border: 2px solid var(--ink); border-radius: 999px;
    box-shadow: 3px 3px 0 var(--ink);
    font: 700 16px/1.2 "Inter", system-ui, sans-serif;
    cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
  }
  .pg-chip .pg-ico{ font-size: 20px; line-height: 1; }
  .pg-chip[aria-pressed="true"]{ background: var(--gold); transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
  .pg-chip.pg-lifted{ opacity: .35; }
  .pg-chip:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
  @media (hover: hover){ .pg-chip:hover{ transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink); } }
  .pg-ghost{
    position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
    margin: 0; cursor: grabbing; background: var(--gold);
    box-shadow: 6px 8px 0 rgba(21,23,26,.85); transform-origin: 30% 50%;
  }
  .pg-foot{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; min-height: 24px; }
  .pg-status{ margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
  .pg-skip{
    flex: none; margin-left: auto; padding: 4px 2px; border: 0; background: none; cursor: pointer;
    font: 500 14px/1.2 "Inter", system-ui, sans-serif; color: var(--ink-soft);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .pg-skip:hover{ color: var(--ink); }
  .pg-skip:focus-visible{ outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

  .pg-slot{
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 76px; width: 100%;
    background: rgba(255,255,255,.75); color: var(--ink-soft);
    border: 2.5px dashed rgba(21,23,26,.45); border-radius: 16px;
    font: 900 30px/1 "Fraunces", Georgia, serif; cursor: pointer;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
  }
  .pg-armed .pg-slot{ border-color: var(--ink); animation: pg-breathe 1.2s ease-in-out infinite; }
  .pg-slot.pg-over{ background: #FFF5C2; border-style: solid; border-color: var(--ink); transform: scale(1.02); animation: none; }
  .pg-slot:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
  @keyframes pg-breathe{ 0%,100%{ background: rgba(255,255,255,.75); } 50%{ background: rgba(255,245,194,.9); } }

  .pg-no{ animation: pg-shake .4s ease; }
  @keyframes pg-shake{ 0%,100%{ transform: translateX(0); } 20%{ transform: translateX(-8px); } 40%{ transform: translateX(7px); } 60%{ transform: translateX(-5px); } 80%{ transform: translateX(3px); } }
  .compare-item.pg-placed{ animation: pg-land .45s cubic-bezier(.3,1.6,.5,1); }
  @keyframes pg-land{ 0%{ transform: scale(.85); } 60%{ transform: scale(1.04); } 100%{ transform: none; } }

  .pg-panel.pg-won{ background: #DFFBEA; border-color: var(--quiz-green); box-shadow: 4px 4px 0 var(--quiz-green); position: relative; top: auto; }
  .pg-panel.pg-won .pg-title{ color: #0B6B37; }
  .pg-panel.pg-won .pg-how, .pg-panel.pg-won .pg-chips, .pg-panel.pg-won .pg-foot{ display: none; }
  .pg-panel.pg-won{ padding-bottom: 14px; }
  .pg-panel.pg-shown{ position: relative; top: auto; }

  @media (max-width: 760px){
    .pg-panel{ top: 72px; padding: 12px 14px 10px; border-radius: 16px; }
    .pg-title{ font-size: 18px; }
    .pg-how{ font-size: 14px; margin-bottom: 10px; }
    /* Am Telefon eine Reihe zum Wischen statt drei Reihen, und die Anleitung
       klappt nach dem ersten Zug weg: so bleibt das Feld oben klein. */
    .pg-chips{
      flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
      margin: 0 -14px; padding: 2px 14px 6px; scrollbar-width: none;
    }
    .pg-chips::-webkit-scrollbar{ display: none; }
    .pg-chip{ flex: none; white-space: nowrap; font-size: 15px; padding: 5px 13px 5px 8px; touch-action: pan-x; }
    .pg-started .pg-how{ display: none; }
    .pg-started .pg-title{ margin-bottom: 8px; }
    .pg-foot{ margin-top: 6px; }
    .pg-status{ font-size: 14px; }
    .pg-chip .pg-ico{ font-size: 18px; }
    .pg-slot{ min-height: 64px; }
  }
  @media (prefers-reduced-motion: reduce){
    .pg-armed .pg-slot, .pg-no, .compare-item.pg-placed{ animation: none; }
  }

  /* Aufgeklappte Berufskarte (Kap. 7 und 12) als echtes Vollbild (26.10.2026).
     Drei Dinge hielten sie klein:
     1. Sie liegt im Inhalt ihres Kapitels (.wrap, Ebene 2). Der „Als Nächstes“-
        Knopf ist ein eigener .wrap danach und lag deshalb über ihr.
     2. main und .journey-wrap sind isoliert; dadurch blieb auch die Kopfzeile
        über der Karte.
     3. Das Aufzoomen hielt sein Ende fest (transform: scale(1)). Ein transform macht die
        Karte zum Bezugsrahmen für den fest positionierten Abdunkler (::before),
        der deshalb nur so groß wie die Karte war: weiße Ränder statt Dunkel.
        will-change: transform hat dieselbe Wirkung.
     Solange eine Karte offen ist, kommt ihr Kapitel nach vorn, die Isolierung
     ruht, und das Aufzoomen hält sein Ende nicht fest (fill-mode backwards). */
  section > .wrap:has(.career-card.is-flipped){ z-index: 118; }
  main:has(.career-card.is-flipped), .journey-wrap:has(.career-card.is-flipped){ isolation: auto; }
  .career-card.is-flipped{ transform: none; will-change: auto; animation-fill-mode: backwards; }

  /* ---------- Glossar als Nachschlagewerk (26.10.2026) ----------
     Vorher: 50 gestrichelte Kästchen, nur das Wort zu sehen, die Erklärung erst
     nach einem Tipp; auf jedem Kästchen ein Lautsprecher, an jedem Kapitel ein
     Zähler „0/3“; oben Zähler, Balken, Suche und Knopf in einer engen Zeile.
     Jetzt: jede Erklärung steht offen da. Oben eine große Suche und darunter
     leise, wie viele Wörter man in den Kapiteln schon gefunden hat. Gefundene
     Wörter tragen einen goldenen Haken. Gesammelt wird weiter beim Antippen
     der gepunkteten Wörter in den Kapiteln. */
  #guide-glossary .gw-bar{
    display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    align-items: center; gap: 8px 28px; max-width: none; margin: 0 0 34px;
  }
  #guide-glossary .gw-tools{ grid-column: 1; grid-row: 1 / span 2; display: block; }
  #guide-glossary .gw-search{
    display: block; width: 100%; max-width: none;
    padding: 14px 18px 14px 48px; font-size: 17px;
    border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%2315171A' stroke-width='2.4'/%3E%3Cpath d='m15.5 15.5 5 5' stroke='%2315171A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 17px 50% / 20px 20px no-repeat;
  }
  #guide-glossary .gw-all{ display: none; }
  #guide-glossary .gw-count{
    grid-column: 2; grid-row: 1; align-self: end;
    font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink-soft);
  }
  #guide-glossary .gw-count b{ font: 700 15px/1 "Inter", system-ui, sans-serif; color: var(--ink); }
  #guide-glossary .gw-track{
    grid-column: 2; grid-row: 2; align-self: start;
    width: 100%; max-width: 260px; height: 10px; border-width: 1.5px;
  }
  #guide-glossary .gw-fill{ border-right-width: 1.5px; }

  #guide-glossary .gw-groups{ gap: 40px; }
  #guide-glossary .gw-head{ margin-bottom: 14px; gap: 10px; }
  #guide-glossary .gw-head .chapter-num{ width: 30px; height: 30px; font-size: 13px; }
  #guide-glossary .gw-head .gw-title{ font-size: 19px; }
  #guide-glossary .gw-head .gw-score{ display: none; }
  #guide-glossary .gw-group.is-done .chapter-num{ background: var(--gold); }

  #guide-glossary .glossary-list.gw-album{
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px; align-items: stretch; grid-auto-flow: row;
  }
  #guide-glossary .gw-album .glossary-entry,
  #guide-glossary .gw-album .glossary-entry.is-open,
  #guide-glossary .gw-album .glossary-entry.gw-have{
    grid-column: auto;
    padding: 14px 54px 16px 16px;
    background: var(--paper);
    border: 1.5px solid rgba(20,23,26,0.16); border-radius: 16px;
    box-shadow: none;
  }
  #guide-glossary .gw-album .glossary-entry.gw-hide{ display: none; }
  #guide-glossary .gw-album .glossary-entry dt{
    display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  }
  #guide-glossary .gw-word{
    display: inline; width: auto; padding: 0; cursor: text;
    font: 800 18px/1.25 "Fraunces", Georgia, serif; color: var(--ink);
  }
  #guide-glossary .gw-word span{ text-decoration: none; }
  #guide-glossary .gw-album .glossary-entry dd{
    display: block; padding: 0;
    font-size: 16px; line-height: 1.5; color: var(--ink-soft);
  }
  /* gefunden: kleiner goldener Haken vor dem Wort */
  #guide-glossary .gw-album .glossary-entry.gw-have dt::before{
    content: "✓"; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--gold); border: 1.5px solid var(--ink);
    font: 900 11px/1 "Inter", system-ui, sans-serif; color: var(--ink);
  }
  #guide-glossary .gw-say{
    top: 12px; right: 12px; width: 32px; height: 32px;
    background: #EEF5F1; border: 0; font-size: 14px; opacity: .8;
  }
  #guide-glossary .gw-say:hover, #guide-glossary .gw-say.is-speaking{ background: var(--gold); opacity: 1; }
  /* aus einem Kapitel hierher gesprungen: kurz golden umrandet */
  #guide-glossary .gw-album .glossary-entry:target{ border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }

  @media (max-width: 760px){
    #guide-glossary .gw-bar{ grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
    #guide-glossary .gw-tools{ grid-row: 1; }
    #guide-glossary .gw-count{ grid-column: 1; grid-row: 2; align-self: start; }
    #guide-glossary .gw-track{ grid-column: 1; grid-row: 3; max-width: none; }
    #guide-glossary .glossary-list.gw-album{ grid-template-columns: 1fr; gap: 10px; }
    #guide-glossary .gw-album .glossary-entry dd{ font-size: 15.5px; }
  }

  /* ---------- Startseite als Buchumschlag (27.10.2026) ----------
     Vorher: „Interaktiver Guide“ stand zweimal untereinander, die Wolke war
     ein blasses Wasserzeichen, alles mittig gestapelt. Jetzt ist der Kopf der
     Seite ein Buch, das auf dem Tisch liegt: Rücken links, Tintenrand, zwei
     Seitenkanten unten rechts. Auf dem Umschlag der Titel, die Wolke in voller
     Farbe und die acht Freunde als runde Aufkleber um sie herum. Die einzige
     Bewegung: die Buchstaben des Titels hüpfen (wie bisher) und die Aufkleber
     springen dabei einmal auf. */
  .guide-hero.cover-hero{
    padding: 44px 0 76px; text-align: left; overflow: hidden;
    background:
      radial-gradient(rgba(21,23,26,.10) 1.4px, transparent 1.6px) 0 0 / 22px 22px,
      var(--teal) !important;
  }
  .cv-book{ position: relative; max-width: 1120px; margin: 0 auto; }
  /* zwei Seitenkanten hinter dem Umschlag */
  .cv-book::before, .cv-book::after{
    content: ""; position: absolute; inset: 0; border-radius: 10px 26px 26px 10px;
    background: #FFFDF4; border: 3px solid var(--ink);
  }
  .cv-book::before{ transform: translate(16px, 16px); }
  .cv-book::after{ transform: translate(8px, 8px); }
  .cv-cover{
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 54px minmax(0, 1fr);
    background: var(--gold);
    border: 3px solid var(--ink); border-radius: 10px 26px 26px 10px;
    overflow: hidden;
  }
  .cv-spine{
    background: var(--jet); border-right: 3px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset -10px 0 0 rgba(255,255,255,.06);
  }
  .cv-spine span{
    writing-mode: vertical-rl; transform: rotate(180deg);
    font: 900 22px/1 "Fraunces", Georgia, serif; letter-spacing: .12em; color: var(--gold);
  }
  .cv-face{
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center; gap: 24px;
    padding: clamp(28px, 4.5vw, 64px) clamp(24px, 4vw, 60px);
    background: radial-gradient(circle at 76% 50%, rgba(255,255,255,.55), rgba(255,255,255,0) 46%);
  }
  .cover-hero h1.title{
    margin: 0 0 22px;
    font-size: clamp(52px, 7.4vw, 108px); line-height: .92; letter-spacing: -0.03em;
  }
  .cover-hero .title-brand .word{ display: inline-block; white-space: nowrap; }
  .cv-sub{
    margin: 0 0 10px; max-width: 30ch;
    font: 700 clamp(19px, 1.9vw, 23px)/1.3 "Inter", system-ui, sans-serif; color: var(--ink);
  }
  .cv-lede{
    margin: 0 0 30px; max-width: 44ch;
    font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.55; color: var(--ink-soft);
  }
  .cv-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
  .cv-actions .btn-cta{ margin: 0; }
  .cv-about{
    font-weight: 700; font-size: 16px; color: var(--ink);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  }
  .cv-about:hover{ text-decoration-color: var(--jet); background: rgba(255,255,255,.4); border-radius: 4px; }

  .cv-art{
    position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; justify-self: center;
    display: grid; place-items: center;
  }
  .cv-cloud{
    position: relative; width: 76%; height: auto;
    animation: cv-bob 7s ease-in-out infinite;
  }
  @keyframes cv-bob{ 0%,100%{ transform: translateY(0) rotate(-2deg); } 50%{ transform: translateY(-10px) rotate(2deg); } }
  .cv-kid{
    position: absolute; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 50% 30%;
    border-radius: 50%; border: 3px solid var(--ink); background: var(--paper);
    box-shadow: 0 0 0 4px var(--paper), 4px 5px 0 5px var(--ink);
    transform: rotate(var(--r, 0deg));
    animation: cv-pop .5s cubic-bezier(.3,1.6,.5,1) both;
  }
  @keyframes cv-pop{ 0%{ transform: scale(0) rotate(0deg); } 100%{ transform: scale(1) rotate(var(--r, 0deg)); } }
  .cv-kid.k1{ left: -1.3%; top: 21.3%; width: 21%; --r: -8deg; animation-delay: 0.42s; }
  .cv-kid.k2{ left: 25.6%; top: 0.6%; width: 18%; --r: 6deg; animation-delay: 0.49s; }
  .cv-kid.k3{ left: 59.0%; top: 1.0%; width: 20%; --r: -5deg; animation-delay: 0.56s; }
  .cv-kid.k4{ left: 82.8%; top: 25.8%; width: 19%; --r: 8deg; animation-delay: 0.63s; }
  .cv-kid.k5{ left: 80.3%; top: 57.7%; width: 21%; --r: -6deg; animation-delay: 0.70s; }
  .cv-kid.k6{ left: 56.4%; top: 81.4%; width: 18%; --r: 5deg; animation-delay: 0.77s; }
  .cv-kid.k7{ left: 21.0%; top: 79.0%; width: 20%; --r: -7deg; animation-delay: 0.84s; }
  .cv-kid.k8{ left: -1.8%; top: 55.2%; width: 19%; --r: 6deg; animation-delay: 0.91s; }

  @media (max-width: 900px){
    .cv-face{ grid-template-columns: 1fr; gap: 6px; text-align: center;
      background: radial-gradient(circle at 50% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 40%); }
    .cv-art{ order: -1; max-width: 340px; }
    .cover-hero h1.title, .cv-sub, .cv-lede{ margin-left: auto; margin-right: auto; }
    .cv-actions{ justify-content: center; }
  }
  @media (max-width: 560px){
    .guide-hero.cover-hero{ padding: 22px 0 46px; }
    .cv-book::before{ transform: translate(10px, 10px); }
    .cv-book::after{ transform: translate(5px, 5px); }
    .cv-cover{ grid-template-columns: 30px minmax(0, 1fr); border-radius: 8px 20px 20px 8px; }
    .cv-book::before, .cv-book::after{ border-radius: 8px 20px 20px 8px; }
    .cv-spine span{ font-size: 15px; }
    .cv-face{ padding: 22px 18px 28px; }
    .cv-art{ max-width: 290px; }
    .cover-hero h1.title{ font-size: clamp(44px, 13vw, 60px); margin-bottom: 16px; }
    .cv-actions{ flex-direction: column; gap: 16px; }
  }
  /* „Los geht’s!“ springt zu den acht Freunden, unter der festen Kopfzeile */
  #meet-the-gang{ scroll-margin-top: 72px; }
  @media (prefers-reduced-motion: reduce){
    .cv-cloud, .cv-kid{ animation: none; }
  }

  /* ---------- Korrekturen nach dem Review-Board (27.10.2026) ----------
     Antwortblase auf Tablets volle Breite, Schritte-Liste ohne Flex
     (verlinktes Wort rutschte aus dem Satz), Kopfzeile auf dem Handy
     schrumpft den Kapitelknopf statt den Sprachknopf hinauszuschieben,
     Fokusrahmen für Karten, Padlet erst nach Klick. */
  @media (min-width: 561px) and (max-width: 1100px){
    .quiz-answer{ margin-left: 0; max-width: none; grid-template-columns: minmax(130px, 190px) 1fr; }
  }
  .concept-card ol li{ display: block; position: relative; padding-left: 28px; }
  .concept-card ol li::before{ position: absolute; left: 0; top: 6px; }
  @media (max-width: 760px){
    header.site .nav{ flex-wrap: nowrap; }
    header.site .brand{ flex: none; }
    header.site .menu{ min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
    header.site .cn-btn{ min-width: 0; flex: 0 1 auto; }
    header.site .lg-headbtn{ flex: none; }
  }
  .flip-card:focus-visible, .career-card:focus-visible{ outline: 3px solid var(--ink); outline-offset: 4px; }
  .padlet-gate{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 200px; padding: 20px; text-align: center; }
  .padlet-gate .padlet-note{ margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }

  /* ---------- Review-Board, Teil 2 (27.10.2026) ----------
     Finale Challenge: Rückmeldung und Weiter-Knopf statt Auto-Weiter,
     ermutigende Zeile unter der Punktzahl. */
  .fq-feedback{ min-height: 1.6em; margin: 16px 0 0; font-weight: 700; font-size: 17px; color: var(--ink); }
  .fq-feedback.is-right{ color: #0B6B37; }
  .fq-next{ margin-top: 12px; }
  .fq-next[hidden]{ display: none; }
  .fq-cheer{ margin: 6px auto 22px; max-width: 46ch; font-size: 18px; line-height: 1.5; color: var(--ink); text-align: center; }
  #finalQuizQuestionText:focus, #finalQuizScoreText:focus{ outline: none; }

  /* ---------- Design-Board-Korrekturen (27.10.2026) ----------
     Reiselinie nur noch auf breiten Bildschirmen, blass und ruhig; Wolke und
     Bande in der Schlussprüfung; Schließen-Knopf für Karten; gesammelte Wörter
     sichtbar; Paare-Spiel auf dem Handy kompakter; Kopfzeile mit Kapitelnummer. */
  @media (max-width: 1399px){ .guide-line{ display: none; } }
  .guide-line .path{ opacity: .22; animation: none; }

  .fq-react{ display: flex; align-items: center; gap: 12px; margin-top: 14px; min-height: 64px; }
  .fq-react .quiz-cloud{ width: 86px; height: auto; flex: none; visibility: hidden; }
  .fq-react.is-on .quiz-cloud{ visibility: visible; }
  .fq-react .fq-feedback{ margin: 0; }
  .fq-gang{ display: flex; justify-content: center; margin: 4px 0 6px; }
  .fq-gang img{ width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--ink); background: var(--paper); margin-left: -10px; box-shadow: 2px 2px 0 var(--ink); }
  .fq-gang img:first-child{ margin-left: 0; }
  .fq-bye{ margin: 0 auto 22px; max-width: 44ch; text-align: center; font: 800 19px/1.35 "Fraunces", Georgia, serif; color: var(--ink); }
  @media (max-width: 420px){ .fq-gang img{ width: 40px; height: 40px; margin-left: -8px; } }

  .cc-close{
    display: none; position: absolute; top: 10px; right: 10px; z-index: 5;
    width: 44px; height: 44px; align-items: center; justify-content: center;
    border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink);
    box-shadow: 2px 2px 0 var(--ink); font: 900 18px/1 "Inter", system-ui, sans-serif; cursor: pointer;
  }
  .career-card.is-flipped .cc-close{ display: inline-flex; }
  .cc-close:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }

  .gw-toast{
    position: fixed; left: 50%; bottom: 22px; z-index: 300; transform: translate(-50%, 20px);
    padding: 10px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--gold); color: var(--ink);
    box-shadow: 3px 3px 0 var(--ink); font: 800 15px/1.2 "Inter", system-ui, sans-serif;
    opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; white-space: nowrap;
  }
  .gw-toast.is-on{ opacity: 1; transform: translate(-50%, 0); }
  #guide-glossary .gw-album .glossary-entry:not(.gw-have){ background: rgba(255,255,255,.4); border: 1.5px dashed rgba(20,23,26,.3); }
  #guide-glossary .gw-album .glossary-entry:not(.gw-have) .gw-word{ color: var(--ink-soft); }
  #guide-glossary .gw-album .glossary-entry.gw-have{ background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }

  .cv-restart{ display: block; margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
  .cv-restart[hidden]{ display: none; }

  @media (max-width: 760px){
    .pg-chips{ flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 8px; }
    .pg-chip{ font-size: 14px; }
    .compare-table{ row-gap: 6px; }
    .compare-table > .compare-item.is-physical:not(:first-child){ margin-top: 22px; }
    .compare-table > .compare-arrow{ line-height: 1; font-size: 18px; transform: rotate(90deg); justify-self: center; }
  }
  @media (max-width: 430px){ header.site .brand-text{ display: none; } }

  /* ---------- Umschlag zum Anfassen (27.10.2026) ----------
     Kinder auf dem Umschlag öffnen ihre Karte, die Wolke kichert; Kette in
     Kapitel 4 bricht nicht mehr um; kürzere Zeilen; Sprechblasen linksbündig
     und weniger Leerraum zwischen den Kapiteln auf dem Handy. */
  .cv-kid{ cursor: pointer; transition: box-shadow .15s ease; }
  .cv-kid:hover, .cv-kid:focus-visible{ box-shadow: 0 0 0 4px var(--gold), 4px 5px 0 5px var(--ink); outline: none; }
  .cv-cloud{ cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cv-cloud.cv-giggle{ animation: cv-giggle .7s cubic-bezier(.3,1.5,.5,1); }
  @keyframes cv-giggle{ 0%{ transform: scale(1) rotate(0); } 20%{ transform: scale(1.08, .94) rotate(-6deg); } 45%{ transform: scale(.96, 1.06) rotate(5deg); } 70%{ transform: scale(1.03) rotate(-3deg); } 100%{ transform: scale(1) rotate(0); } }
  .cv-bit{ position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none; font: 900 22px/1 "Fraunces", Georgia, serif; color: var(--ink); animation: cv-bit .9s cubic-bezier(.2,.7,.4,1) forwards; }
  .cv-bit.t{ color: #2A9D94; }
  @keyframes cv-bit{ 0%{ transform: translate(-50%, -50%) scale(.6); opacity: 1; } 100%{ transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1); opacity: 0; } }
  @media (prefers-reduced-motion: reduce){ .cv-cloud.cv-giggle{ animation: none; } .cv-bit{ display: none; } }

  .flow-diagram.is-wrapped{ flex-direction: column; align-items: center; gap: 8px; }
  .flow-diagram.is-wrapped .flow-step{ width: 100%; max-width: 380px; white-space: normal; }
  .flow-diagram.is-wrapped .flow-arrow{ transform: rotate(90deg); animation: none; font-size: 17px; }

  main .chapter-intro > p, main .info-callout > p, main .fact-banner > p, main .hype-box > p, main .neural-box > p{ max-width: 68ch; }
  .hype-hint{ margin: 10px 0 14px; font-weight: 700; color: var(--ink); }

  @media (max-width: 760px){ section{ padding: 64px 0; } }
  @media (max-width: 700px){
    .quiz-card .quiz-bubble, .quiz-answer-bubble, .cloud-intro-bubble{ text-align: left; }
  }

  /* ---------- Impressum (27.10.2026) ---------- */
  #impressum{ padding-top: 0; }
  #impressum .pv-card{ background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); padding: 28px 32px; }
  #impressum .section-head{ background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
  #impressum .section-head p.intro{ color: var(--ink); }
  #impressum .pv-list a, #privacy .pv-list a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  @media (max-width: 600px){ #impressum .pv-card{ padding: 22px 20px; } }
  footer.site .row > div:last-child{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; }
  footer.site .row > div:last-child a{ margin-left: 0; }
  @media (max-width: 700px){ footer.site .row > div:last-child{ justify-content: flex-start; } }

  /* ---------- Rubrik als Chip (27.10.2026) ----------
     Die Rubrik über Überschriften war grau, gesperrt und in Großbuchstaben mit
     Strich davor. Jetzt ein Chip wie die Kapitelnummern: Fraunces, Tintenrand. */
  .kicker{ font-family: "Fraunces", Georgia, serif; font-size: 15px; font-weight: 800; letter-spacing: 0; text-transform: none;
    color: var(--ink) !important; border: 2px solid var(--ink); border-radius: 999px; padding: 5px 14px 6px; gap: 0; line-height: 1.2;
    box-shadow: 3px 3px 0 var(--ink); margin-bottom: 14px; }
  .kicker::before{ display: none !important; }
  @media (max-width: 600px){ .kicker{ font-size: 14px; } }
  .kicker{ background: var(--yellow); transform: rotate(-2deg); }
  .guide-end .kicker{ box-shadow: 3px 3px 0 rgba(0,0,0,.45); }
  .gang .kicker{ display: flex; width: fit-content; margin-left: auto; margin-right: auto; }

  /* ---------- Bandenkarten mit Satz (27.10.2026) ----------
     Ein Satz pro Kind, in seiner eigenen Stimme, unter Alter und Hobbys. */
  .gang-card p.gang-say{ font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 15px; line-height: 1.38; color: var(--ink); margin: 0; padding: 4px 16px 0; }
  .gd .gang-card p.gang-say{ font-size: 16.5px; padding: 2px 20px 4px; }
  @media (max-width: 600px){ .gd .gang-card p.gang-say{ font-size: 15.5px; padding: 0 16px 4px; } }

  /* ---------- Paare ohne Ziehen (27.10.2026) ----------
     Auf Touchscreens wird nicht mehr gezogen: leeren Platz antippen, dort den
     Zwilling wählen. Das Feld klebt dort nicht mehr oben fest. */
  .pg-pick{ position: relative; width: 100%; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); padding: 12px 14px 14px; }
  .pg-pick-q{ margin: 0 34px 10px 0; font: 800 16px/1.3 "Fraunces", Georgia, serif; color: var(--ink); }
  .pg-pick-x{ position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; font: 700 18px/1 "Inter", system-ui, sans-serif; color: var(--ink); cursor: pointer; }
  .pg-pick-x:focus-visible, .pg-opt:focus-visible{ outline: 3px solid var(--ink); outline-offset: 2px; }
  .pg-pick-opts{ display: flex; flex-wrap: wrap; gap: 8px; }
  .pg-opt{ display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 9px; background: #FFE9E9; color: var(--ink);
    border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); font: 700 15px/1.2 "Inter", system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
  .pg-opt .pg-ico{ font-size: 18px; line-height: 1; }
  .pg-opt:active{ transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
  .pg-opt.pg-opt-no{ opacity: .4; text-decoration: line-through; box-shadow: none; cursor: default; }
  @media (hover: none) and (pointer: coarse){
    .pg-panel{ position: relative; top: auto; }
    .pg-chip{ touch-action: manipulation; cursor: pointer; }
  }

  /* ---------- Paare auf dem Handy (27.10.2026) ----------
     Bis 760 px: ein Paar nach dem anderen, vier große Knöpfe, kein Ziehen.
     Die Tabelle erscheint am Ende vollständig. */
  .pg-mobile .compare-headings, .pg-mobile .compare-table{ display: none; }
  .pg-panel.pg-mode-m{ position: relative; top: auto; }
  .pg-mode-m .pg-chips{ display: none; }
  .pg-m{ margin-top: 6px; }
  .pg-m-step{ margin: 0 0 10px; font: 700 13px/1.2 "Inter", system-ui, sans-serif; color: var(--ink-soft); }
  .pg-m .compare-item{ margin: 0; }
  .pg-m-arrow{ text-align: center; font: 900 22px/1 "Fraunces", Georgia, serif; color: var(--ink); margin: 8px 0; }
  .pg-m-q{ margin: 0 0 10px; font: 800 16px/1.3 "Fraunces", Georgia, serif; color: var(--ink); }
  .pg-m-opts{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .pg-m-opts .pg-opt{ justify-content: center; min-height: 54px; padding: 8px 10px; text-align: center; font-size: 15px; }
  .pg-m-opts .pg-opt .pg-ico{ display: none; }
  .pg-opt.pg-opt-yes{ background: #C9F5DA; opacity: 1; }
  .pg-opt:disabled:not(.pg-opt-no){ cursor: default; }
  .pg-m-next{ display: flex; align-items: center; justify-content: center; margin: 14px auto 0; min-height: 48px; padding: 10px 24px;
    background: var(--jet); color: #fff; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--gold);
    font: 700 16px/1.2 "Inter", system-ui, sans-serif; cursor: pointer; touch-action: manipulation; }
  .pg-m-next:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
  .pg-m-next:active{ transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gold); }

  /* ---------- Gruppenbild der Bande (30.10.2026) ----------
     Ein Bild aller acht Kinder mit der Wolke: am Anfang der Bande, beim
     Abschied in Kapitel 15 und auf dem Ergebnis der Schlussprüfung. */
  .gang-group{
    max-width: 920px; margin: 22px auto 30px;
    border: 3px solid var(--ink); border-radius: var(--radius);
    box-shadow: 6px 6px 0 var(--ink); overflow: hidden; background: var(--paper);
  }
  .gang-group img{ display: block; width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; }
  @media (max-width: 600px){
    .gang-group{ margin: 16px auto 22px; box-shadow: 4px 4px 0 var(--ink); border-radius: 16px; }
    .gang-group img{ aspect-ratio: 3/2; object-position: 50% 50%; }   /* 3:2 statt 4:3: alle elf Kinder bleiben im Bild und antippbar (31.10.2026) */
  }
  #guide-farewell .quiz-photo.is-group{ aspect-ratio: 1/1; --photo-accent: var(--coral); }
  .fq-group{
    margin: 10px auto 16px; max-width: 520px;
    border: 3px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink);
    overflow: hidden; background: var(--paper);
  }
  .fq-group img{ display: block; width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; }

  /* ---------- Hype-Kurve groß (30.10.2026) ---------- */
  .hype-chart{ position: relative; }
  .hype-zoom{ display: none; }
  @media (max-width: 900px){
    .hype-chart svg{ cursor: zoom-in; }
    .hype-zoom{
      display: inline-flex; align-items: center; gap: 6px;
      position: absolute; right: 0; top: -6px; min-height: 40px; padding: 0 14px;
      font: 700 14px/1 "Inter", sans-serif; color: var(--ink);
      background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
      box-shadow: 2px 2px 0 var(--ink); cursor: pointer;
    }
    .hype-zoom span{ font-size: 17px; }
    .hype-zoom:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
    .hype-chart{ padding-top: 40px; }
  }
  .hz{ position: fixed; inset: 0; z-index: 2000; background: var(--paper, #fff); }
  .hz[hidden]{ display: none; }
  .hz-stage{
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(94vw, calc(88vh * 1.75)); width: min(94vw, calc(88dvh * 1.75));
  }
  .hz-rot .hz-stage{
    width: min(92vh, calc(90vw * 1.75)); width: min(92dvh, calc(90vw * 1.75));
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .hz-stage svg{ display: block; width: 100%; height: auto; overflow: visible; cursor: default; }
  .hz .hype-axis{ font-size: 13px; }
  .hz .hype-label{ font-size: 15px; }
  .hz .hype-label-slope{ font-size: 13.5px; transform: none; }
  .hz-x{
    position: absolute; top: 12px; right: 12px; width: 48px; height: 48px;
    font: 700 22px/1 "Inter", sans-serif; color: var(--ink); background: var(--paper);
    border: 2px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink); cursor: pointer;
  }
  .hz-x:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
  html.hz-lock{ overflow: hidden; }

  /* ---------- Handy-Durchgang (30.10.2026) ---------- */
  /* Öko-Waage: Schilder nicht unter 12,5 px */
  @media (max-width: 600px){ .eco-tag{ font-size: 12.5px; line-height: 1.25; } }
  /* Grundsätze (Kap. 11, 15): Text im Kreis als ein Absatz, Fachwort-Links bleiben im Satz */
  .principle-blob .pb-txt{ display: block; }
  /* Zukunfts-Karussell (Kap. 14): Karte so breit wie der Bildschirm, Pfeile darunter, nichts abgeschnitten */
  @media (max-width: 600px){
    .future-carousel{ flex-wrap: wrap; justify-content: center; gap: 14px 28px; }
    .future-carousel .carousel-viewport{ flex: 0 0 100%; order: -1; }
    .carousel-track{ align-items: stretch; }
    .carousel-track .concept-card{ height: auto; min-height: 220px; }
    .carousel-track .concept-card ul{ overflow: visible; }
    .carousel-arrow{ width: 48px; height: 48px; }
  }
  /* Rückseite der Alltagskarten (Kap. 7, 8): Bild größer */
  @media (max-width: 480px){
    .flip-back.has-image .flip-back-img{ width: 66%; }
    .flip-grid.has-image-cards .flip-card{ aspect-ratio: 16/21; }
  }
  @media (max-width: 380px){ .flip-back.has-image .flip-back-img{ width: 54%; } }
  @media (max-width: 340px){ .flip-back.has-image .flip-back-img{ width: 38%; } }
  /* Lange Wörter (z. B. „Geisteswissenschaften“) trennen statt überlaufen */
  .career-card h4, .career-card-front h4, .concept-card h4, .flip-front h4, .flip-back h4, .principle-blob strong{ hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  /* Fingergroße Ziele */
  .pg-skip{ min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
  @media (max-width: 700px){
    footer.site .row > div:last-child a{ display: inline-flex; align-items: center; min-height: 40px; }
    .gd-face{ position: relative; }
    .gd-face::after{ content: ""; position: absolute; inset: -6px -3px; }
  }

  /* ---------- Chihuahua oder Muffin (Kap. 4, 30.10.2026) ---------- */
  .muffin-fig{ margin: 4px 0 18px; max-width: 340px; }
  .muffin-fig img{
    display: block; width: 100%; height: auto; cursor: zoom-in;
    border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); background: var(--paper);
  }
  .muffin-fig figcaption{ margin-top: 10px; font-size: 15px; line-height: 1.4; }
  .muffin-q{ display: block; font-weight: 700; color: var(--ink); }
  .muffin-credit{ display: block; font-size: 12.5px; color: var(--ink-soft); }
  @media (max-width: 600px){ .muffin-fig{ max-width: none; } }

  /* Mindestschrift 15 px auf den Kartenrückseiten (30.10.2026): etwas mehr Höhe, damit die längste Karte passt */
  @media (min-width: 481px) and (max-width: 900px){ .flip-grid.has-image-cards .flip-card{ aspect-ratio: 16/18; } }
  @media (max-width: 380px){ .flip-grid.has-image-cards .flip-card{ aspect-ratio: 16/23; } }

  /* ---------- Sortierspiel Kap. 5 (30.10.2026) ---------- */
  .sg{ margin: 0 0 48px; }
  .sg-title{ font-family: "Fraunces", serif; font-weight: 900; font-size: clamp(22px, 2.8vw, 28px); margin: 0 0 8px; }
  .sg-how{ margin: 0 0 6px; font-size: 18px; line-height: 1.5; color: var(--ink); max-width: 62ch; }
  .sg-count{ margin: 0 0 18px; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
  .sg-board{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .sg-boxes{ display: grid; gap: 18px; position: sticky; top: 84px; }
  .sg-box{
    min-height: 170px; padding: 16px; border-radius: var(--radius); background: var(--paper);
    border: 3px dashed var(--ink); transition: background-color .2s ease, transform .15s ease;
  }
  .sg-box.is-can{ border-color: #1E8E5A; }
  .sg-box.is-cannot{ border-color: #D14343; }
  .sg-box.is-over{ border-style: solid; transform: scale(1.02); }
  .sg-box.is-can.is-over{ background: #E3F6EC; }
  .sg-box.is-cannot.is-over{ background: #FBE5E5; }
  .sg-box.is-hit{ animation: sg-hit .45s ease; }
  .sg-box.is-miss{ animation: sg-miss .4s ease; }
  .sg-box-h{ display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: "Fraunces", serif; font-weight: 900; font-size: 22px; }
  .sg-box-ico{ display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font: 800 18px/1 "Inter", sans-serif; }
  .is-can .sg-box-ico{ background: #1E8E5A; }
  .is-cannot .sg-box-ico{ background: #D14343; }
  .sg-box-list{ display: flex; flex-wrap: wrap; gap: 8px; }
  .sg-empty{ margin: 6px 0; font-size: 16px; color: var(--ink-soft); font-style: italic; }
  .sg-pool-h{ margin: 0 0 12px; font-size: 16px; font-weight: 800; letter-spacing: .04em; color: var(--ink-soft); }
  .sg-pool{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
  .sg-chip{
    display: inline-block; max-width: 100%; padding: 12px 18px; border-radius: 999px;
    background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
    font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink);
    cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease;
  }
  .sg-chip:hover{ transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
  .sg-chip:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
  .sg-chip.is-sel{ background: var(--gold); transform: translate(-1px, -2px); box-shadow: 4px 5px 0 var(--ink); }
  .sg-chip.is-lifted{ opacity: .3; }
  .sg-chip.is-no{ animation: sg-shake .4s ease; }
  .sg-chip.is-done{ cursor: default; box-shadow: none; font-size: 16px; padding: 8px 14px; }
  .is-can .sg-chip.is-done{ background: #E3F6EC; border-color: #1E8E5A; }
  .is-cannot .sg-chip.is-done{ background: #FBE5E5; border-color: #D14343; }
  .sg-chip.is-done:hover{ transform: none; }
  .sg-ghost{ position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none; opacity: .95; box-shadow: 6px 8px 0 var(--ink); background: var(--gold); }
  .sg-choose{
    flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 10px 12px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
  }
  .sg-choose[hidden]{ display: none; }
  .sg-choose-q{ margin: 0 6px 0 0; font-size: 16px; font-weight: 700; }
  .sg-choose-b{
    min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ink); cursor: pointer;
    font: 700 16px/1 "Inter", sans-serif; color: #fff;
  }
  .sg-choose-b.is-can{ background: #1E8E5A; }
  .sg-choose-b.is-cannot{ background: #D14343; }
  .sg-choose-b:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
  .sg-say{ min-height: 1.5em; margin: 16px 0 0; font-size: 18px; font-weight: 700; }
  .sg-again{ margin-top: 10px; }
  @keyframes sg-shake{ 0%,100%{ transform: translateX(0); } 20%{ transform: translateX(-8px); } 40%{ transform: translateX(7px); } 60%{ transform: translateX(-5px); } 80%{ transform: translateX(3px); } }
  @keyframes sg-hit{ 0%{ transform: scale(1); } 40%{ transform: scale(1.03); } 100%{ transform: scale(1); } }
  @keyframes sg-miss{ 0%,100%{ transform: translateX(0); } 30%{ transform: translateX(-6px); } 60%{ transform: translateX(5px); } }
  @media (max-width: 760px){
    .sg-board{ grid-template-columns: 1fr; gap: 18px; }
    .sg-boxes{ position: static; grid-template-columns: 1fr 1fr; gap: 10px; }
    .sg-box{ min-height: 120px; padding: 10px; }
    .sg-box-h{ font-size: 17px; gap: 6px; }
    .sg-box-ico{ width: 26px; height: 26px; font-size: 15px; }
    .sg-chip{ font-size: 16px; padding: 11px 16px; }
    .sg-chip.is-done{ font-size: 14px; padding: 6px 10px; }
  }
  @media (prefers-reduced-motion: reduce){ .sg-box.is-hit, .sg-box.is-miss, .sg-chip.is-no{ animation: none; } .sg-chip, .sg-box{ transition: none; } }

  /* ---------- Karte „Auch KI macht Fehler!“ nach UX/UI-Panel (30.10.2026) ---------- */
  .fact-banner.mistakes{ padding: 26px 28px 28px; }
  .mk-h{ display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: "Fraunces", serif; font-weight: 900; font-size: clamp(22px, 2.6vw, 28px); color: var(--ink); }
  .mk-h .emoji{ font-size: 1.1em; }
  .mk-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 26px; align-items: start; }
  .mk-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .mk-item{ display: flex; gap: 14px; align-items: flex-start; background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; padding: 14px 16px; box-shadow: 3px 3px 0 var(--ink); }
  .mk-ico{ flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; background: #BFE3F5; border-radius: 50%; }
  .mk-item p{ margin: 0 !important; font-size: 18px !important; line-height: 1.5; color: var(--ink) !important; max-width: none !important; }
  .mk-t{ display: block; font-size: 19px; margin-bottom: 2px; }
  .mistakes .muffin-fig{ max-width: none; margin: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; padding: 14px; box-shadow: 3px 3px 0 var(--ink); }
  .mistakes .muffin-fig img{ cursor: default; box-shadow: none; border-width: 2px; }
  .mistakes .muffin-fig figcaption{ margin-top: 12px; }
  .mistakes .muffin-q{ font-size: 19px; font-family: "Fraunces", serif; font-weight: 800; }
  .mf-wrap{ position: relative; }
  .mf-grid{ position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); border-radius: 12px; overflow: hidden; }
  .mf-cell{ position: relative; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; }
  .mf-cell:focus-visible{ outline: 3px solid var(--ink); outline-offset: -3px; z-index: 1; }
  .mf-cell span{ position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%) scale(.6); opacity: 0;
    padding: 3px 8px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper);
    font: 800 14px/1.2 "Inter", sans-serif; color: var(--ink); white-space: nowrap; transition: transform .2s ease, opacity .2s ease; }
  .mf-cell.is-dog span{ background: #FFE66D; }
  .mf-cell.is-muffin span{ background: #FFB3AD; }
  .mf-cell.is-open span{ opacity: 1; transform: translateX(-50%) scale(1); }
  .mf-cell:hover:not(.is-open){ background: rgba(255,255,255,.18); }
  .mf-bar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
  .mf-hint, .mf-count{ margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
  .mf-count{ color: var(--ink-soft); }
  .mf-all{ min-height: 40px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font: 700 15px/1 "Inter", sans-serif; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
  .mf-all:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
  .mf-done{ margin: 8px 0 0; font-size: 16px; font-weight: 700; color: var(--ink); }
  @media (max-width: 900px){
    .mk-grid{ grid-template-columns: 1fr; }
    .mistakes .muffin-fig{ order: 2; }
  }
  @media (max-width: 600px){
    .fact-banner.mistakes{ padding: 20px 16px 18px; }
    .mk-item{ padding: 12px; gap: 10px; }
    .mk-ico{ width: 36px; height: 36px; font-size: 20px; }
    .mk-item p{ font-size: 17px !important; }
    .mk-t{ font-size: 18px; }
    .mf-cell span{ font-size: 13px; padding: 2px 6px; bottom: 4px; }
  }
  @media (prefers-reduced-motion: reduce){ .mf-cell span{ transition: none; } }
  .mf-q{ margin: 0 0 4px; font-family: "Fraunces", serif; font-weight: 900; font-size: 21px; line-height: 1.25; color: var(--ink); }
  .mf-sub{ margin: 0 0 12px; font-size: 16px; color: var(--ink-soft); }

  /* Chihuahua oder Muffin, Version 2: selbst entscheiden */
  .mf-cell.is-open span, .mf-cell.is-ok span{ opacity: 1; transform: translateX(-50%) scale(1); }
  .mf-cell.is-sel{ box-shadow: inset 0 0 0 4px #FFE66D, inset 0 0 0 6px var(--ink); background: rgba(255,230,109,.18); }
  .mf-cell.is-ok{ cursor: default; }
  .mf-cell.is-ok:hover{ background: transparent; }
  .mf-cell.is-no{ animation: sg-shake .4s ease; }
  .mf-panel{ margin-top: 12px; padding: 12px; border: 2px solid var(--ink); border-radius: 14px; background: #F7FFF7; }
  .mf-ask{ margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--ink); }
  .mf-btns{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mf-btns[hidden]{ display: none; }
  .mf-pick{ min-height: 52px; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
    font: 800 18px/1 "Inter", sans-serif; color: var(--ink); cursor: pointer; }
  .mf-pick.is-dog{ background: #FFE66D; }
  .mf-pick.is-muffin{ background: #FFB3AD; }
  .mf-pick:active{ transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
  .mf-pick:disabled{ opacity: .45; cursor: default; box-shadow: none; }
  .mf-pick:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
  .mf-say{ min-height: 1.4em; margin: 10px 0 0; font-size: 17px; font-weight: 800; }
  .mf-say.is-right{ color: #1E7A4E; }
  .mf-say.is-wrong{ color: #B42E2E; }
  .mf-panel:has(.mf-btns[hidden]){ display: none; }
  @media (prefers-reduced-motion: reduce){ .mf-cell.is-no{ animation: none; } }
  .mf-cell span b, .mf-cell span i{ font-weight: 800; font-style: normal; }
  @media (max-width: 520px){
    .mf-cell span{ padding: 2px 5px; bottom: 50%; transform: translate(-50%, 50%) scale(.6); font-size: 20px; line-height: 1; }
    .mf-cell.is-ok span{ transform: translate(-50%, 50%) scale(1); }
    .mf-cell span i{ display: none; }
  }

  /* Alltagskarten bleiben offen (30.10.2026) */
  .flip-card.is-flipped{ cursor: default; }

  /* Erdkugel auf der Öko-Waage (30.10.2026) */
  .eco-ball{
    position: absolute; left: 50%; bottom: 100%; width: 34px; height: 34px; margin-left: -17px; margin-bottom: -1px;
    z-index: 2; will-change: transform; pointer-events: none;
  }
  .eco-ball-in{ display: block; width: 100%; height: 100%; }
  @media (max-width: 600px){ .eco-ball{ width: 28px; height: 28px; margin-left: -14px; } }

  /* ---------- Freiwischen Kap. 9 (30.10.2026) ---------- */
  .sc-hint{ max-width: 62ch; margin: 0 0 18px; font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.45; }
  .sc-list{ position: relative; user-select: none; -webkit-user-select: none; }
  .sc-cover{
    position: absolute; left: 0; top: 0; z-index: 2; touch-action: pan-y;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ctext x='4' y='32' font-size='30'%3E%F0%9F%A7%BD%3C/text%3E%3C/svg%3E") 20 20, pointer;
    transition: opacity .45s ease;
  }
  .sc-cover.is-gone{ opacity: 0; pointer-events: none; }
  .sc-all{
    display: block; margin: 22px auto 0; min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 999px;
    background: var(--paper); box-shadow: 3px 3px 0 var(--ink); font: 700 16px/1 "Inter", sans-serif; color: var(--ink); cursor: pointer;
  }
  .sc-all[hidden]{ display: none; }
  .sc-all:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce){ .sc-cover{ transition: none; } }
  /* Kinder wischen oft weiter, wenn schon alles frei ist: keine blaue/gelbe Textmarkierung */
  #ch9 .concept-grid{ user-select: none; -webkit-user-select: none; }

  /* Text in Kästen nutzt die volle Breite des Kastens (30.10.2026, Jan).
     Ersetzt die Begrenzung auf ~68 Zeichen (Design-Board 27.10.) für Kästen; Kapitel-Einleitungen
     ohne Kasten bleiben begrenzt. */
  main .info-callout > p, main .fact-banner > p, main .hype-box > p, main .neural-box > p,
  .neural-box p.flow-caption, .eco-scale figcaption, .final-quiz-box p{ max-width: none; }

  /* Mehr Luft zwischen Überschrift und Kette „So sprechen wir mit Computern“ (30.10.2026) */
  .neural-box h4 + .flow-diagram{ margin-top: 28px; }
  @media (max-width: 760px){ .neural-box h4 + .flow-diagram{ margin-top: 20px; } }

  /* Berufs- und Studienkarten (Kap. 12, 13) am Laptop: offene Karte als Fenster in der Mitte
     statt bildschirmfüllend (30.10.2026, Jan). Bild links, Text rechts. Am Handy und Tablet
     (unter 900 px) bleibt die volle Bildschirmansicht. Kein transform (siehe Hinweis oben:
     der Abdunkler braucht den ganzen Bildschirm), Mitte über inset. */
  @media (min-width: 900px){
    .career-card.is-flipped{
      inset: max(24px, calc((100vh - 500px) / 2)) max(24px, calc((100vw - 880px) / 2));
    }
    .career-card.is-flipped .career-card-back{
      display: grid; grid-template-columns: minmax(220px, 300px) 1fr; column-gap: 34px; row-gap: 6px;
      align-content: center; align-items: start; justify-items: start; text-align: left; padding: 40px 44px;
    }
    .career-card.is-flipped .career-card-img{ grid-column: 1; grid-row: 1 / span 4; width: 100%; margin: 0; align-self: center; }
    .career-card.is-flipped .career-card-back > :not(.career-card-img):not(.cc-close){ grid-column: 2; }
    .career-card.is-flipped .career-card-back h4{ font-size: 30px; margin: 0 0 10px; align-self: end; }
    .career-card.is-flipped .career-card-back p{ margin: 0 0 12px; }
  }

/* Häkchen für jeden Abschnitt (guide.js Teil 18, 30.10.2026) */
.pr-badge{
  position: absolute; top: -14px; right: -12px; z-index: 4;
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  font: 900 15px/1 Inter, system-ui, sans-serif; pointer-events: none;
}
.pr-badge[hidden]{ display: none; }
.pr-badge.is-done{ background: var(--quiz-green); color: #fff; font-size: 20px; padding: 0; width: 36px; transform: rotate(-8deg); }
.pr-badge.is-part{ background: var(--paper); color: var(--ink); }
.pr-badge.is-pop{ animation: pr-pop .55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pr-pop{ 0%{ transform: scale(0) rotate(-40deg); } 100%{ transform: scale(1) rotate(-8deg); } }
.pr-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 760px){
  .pr-badge{ top: -12px; right: -6px; min-width: 32px; height: 32px; font-size: 14px; }
  .pr-badge.is-done{ width: 32px; font-size: 18px; }
}
/* Kästen, die überstehende Ecken abschneiden, bekommen das Abzeichen innen */
.career-stack-sticky > .pr-badge, .principle-stack-sticky > .pr-badge{ top: 10px; right: 6px; }

/* Kapitelende */
.pr-sum{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
  margin: 0 0 16px; padding: 14px 18px; border: 3px dashed var(--ink); border-radius: 16px; background: var(--paper);
}
.pr-sum-t{ margin: 0; font-weight: 800; font-size: var(--t-card, 18px); color: var(--ink); }
.pr-dots{ display: flex; flex-wrap: wrap; gap: 8px; }
.pr-dot{
  width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper);
  padding: 0; cursor: pointer; font: 900 15px/1 Inter, system-ui, sans-serif; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.pr-dot:hover, .pr-dot:focus-visible{ background: var(--gold); }
.pr-dot.is-done{ background: var(--quiz-green); cursor: default; }
.pr-sum.is-all{ border-style: solid; background: #DDF5E4; box-shadow: 4px 4px 0 var(--ink); }
.pr-sum.is-all .pr-dot{ pointer-events: none; }

/* Kapitel-Menü: grünes Häkchen nur, wenn alles geschafft ist; sonst „3/5“ */
.cn-item .cn-tick, .cn-item.is-seen .cn-tick{ display: none; }
.cn-item.pr-done .cn-tick{ display: inline-flex; }
.pr-frac{ flex: none; font-weight: 800; font-size: 14px; color: var(--ink); background: var(--paper);
  border: 2px solid currentColor; border-radius: 999px; padding: 2px 8px; }
.pr-frac:empty{ display: none; }
.pr-reset-box{ margin: 18px 4px 6px; padding-top: 14px; border-top: 2px dashed rgba(0,0,0,.2); }
.pr-reset{ font: 700 15px/1.2 Inter, system-ui, sans-serif; background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.pr-reset.is-armed{ background: var(--coral, #FF6B6B); }
.pr-reset-note{ margin: 8px 0 0; font-size: 14px; color: var(--ink); opacity: .75; }
@media (prefers-reduced-motion: reduce){ .pr-badge.is-pop{ animation: none; } }
/* Kapitelende: Zeile „Kapitel 4: 3 von 5 geschafft“ neben „Als Nächstes“, am Handy darüber */
.cn-endnext{ flex-wrap: wrap; gap: 16px 18px; align-items: stretch; }
.cn-endnext .pr-sum{ margin: 0; }
@media (max-width: 760px){ .cn-endnext .pr-sum{ width: 100%; } }
/* Häkchen über dem Paare-Kasten (Kap. 1, z-index 20) und anderen klebenden Kästen, aber unter der Kopfzeile (50) */
.pr-badge{ z-index: 25; }
/* Kapitelnummern nach Buchteilen (Jan, 31.10.2026): 1–5 Grundlagen türkis, 6–10 KI in der Welt gelb,
   11–15 Verantwortung und Zukunft rot. Ersetzt die alten c-blue/c-purple/… Farben ohne Regel.
   Das Kapitel-Menü und „Als Nächstes“ übernehmen die Farbe von hier (guide.js Teil 6 liest sie aus). */
#ch1 .chapter-num, #ch2 .chapter-num, #ch3 .chapter-num, #ch4 .chapter-num, #ch5 .chapter-num{ background: var(--teal); color: var(--ink); }
#ch6 .chapter-num, #ch7 .chapter-num, #ch8 .chapter-num, #ch9 .chapter-num, #ch10 .chapter-num{ background: var(--gold); color: var(--ink); }
#ch11 .chapter-num, #ch12 .chapter-num, #ch13 .chapter-num, #ch14 .chapter-num, #ch15 .chapter-num{ background: var(--coral); color: var(--ink); }
/* Weißer Rand und Schatten: so bleibt die Nummer auch dort ein farbiger Knopf, wo sie die Farbe des Kapitels hat (Kap. 1, 7, 14). */
section[id^="ch"] .chapter-num{ box-shadow: 0 0 0 3px var(--paper), 3px 3px 0 3px var(--ink); }

/* ===== Handy-UX-Gremium, Paket 1 (31.10.2026) ===== */
/* Sortierspiel Kap. 5: Hinweis bei falscher Antwort direkt unter den Knöpfen, Platzhalter, Zähler in den Feldern */
.sg-choose-msg{ flex-basis: 100%; margin: 6px 0 0; font-weight: 800; font-size: 17px; color: var(--quiz-red); }
.sg-choose-msg:empty{ display: none; }
.sg-flash{ margin: 0; padding: 11px 16px; border: 2px dashed var(--quiz-green); border-radius: 999px; color: #0B6B37; font-weight: 800; font-size: 16px; transition: opacity .4s ease; }
.sg-flash.is-gone{ opacity: 0; }
.sg-box-n{ margin-left: auto; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; border: 2px solid var(--ink); background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; font: 800 15px/1 Inter, system-ui, sans-serif; }
@media (max-width: 760px){
  /* Felder kleben oben, damit man auch weiter unten noch hineinziehen kann; einsortierte Karten erst am Ende zeigen */
  .sg-boxes{ position: sticky; top: 72px; z-index: 5; }
  .sg-box{ min-height: 0; padding: 8px 10px; }
  .sg-box-h{ margin: 0; }
  .sg:not(.is-over) .sg-box-list{ display: none; }
  .sg.is-over .sg-box-list{ margin-top: 10px; }
}

/* Weltkarte Kap. 6: größere Trefferfläche, besuchte Nadeln grün, Xing und Shy Jeans am Handy auseinander */
.map-pin::before{ content: ""; position: absolute; inset: -8px; }
.map-pin.is-seen .pin-dot{ background: var(--quiz-green); }
.map-popup-text{ font-size: 16px; }
@media (max-width: 480px){
  .worldmap-wrap .map-pin:nth-of-type(7){ left: 78.5% !important; }
  .worldmap-wrap .map-pin:nth-of-type(8){ left: 90.5% !important; top: 37% !important; }
}

/* Öko-Waage: die Enden sind antippbar */
.eco-end-tap{ cursor: pointer; text-decoration: underline dotted 2px; text-underline-offset: 3px; }
/* „Weniger Bewegung“: Regeln getrennt, sonst verwirft jeder Browser die ganze Zeile */
@media (prefers-reduced-motion: reduce){
  .eco-hand{ animation: none; }
  .eco-attract::-webkit-slider-thumb{ animation: none; }
  .eco-attract::-moz-range-thumb{ animation: none; }
  .brain-pulse.is-visible{ animation: none; }
}

/* Wort-Karte offen: Hinweis „Neues Wort“ oben statt über der Erklärung */
.gw-toast.is-top{ bottom: auto; top: 78px; }

/* Häkchen: Zähler in der Hinweiszeile, Punkte größer antippbar, Kapitelende immer gleich aufgebaut */
.pr-hintcount{ display: inline-block; margin-left: 8px; padding: 2px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
  font: 800 15px/1.3 Inter, system-ui, sans-serif; color: var(--ink); white-space: nowrap; vertical-align: 1px; }
.pr-hintcount:empty{ display: none; }
.pr-hintcount.is-all{ background: var(--quiz-green); color: #fff; }
.pr-badge.is-part{ font-size: 15px; white-space: nowrap; }
.pr-dot{ position: relative; }
.pr-dot::after{ content: ""; position: absolute; inset: -8px; }
.pr-dots{ gap: 14px; }
.pr-sum{ flex-direction: column; align-items: flex-start; justify-content: flex-start; }
.principle-stack-sticky .section-subhead{ padding-inline: 48px; }
.career-card.pr-seen:not(.is-flipped) .career-card-front::after{
  content: "✓"; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--quiz-green); color: #fff;
  border: 2px solid var(--ink); font: 900 15px/1 Inter, system-ui, sans-serif; }
.pr-reset-note{ font-size: 15px; }

/* Stapel am Handy: Berufe (Kap. 12) und Grundsätze (Kap. 11, 15) liegen gleich da, keine leeren Bildschirme */
@media (max-width: 760px){
  .career-stack, .principle-stack{ height: auto !important; }
  .career-stack-sticky, .principle-stack-sticky{ position: static !important; height: auto !important; min-height: 0 !important; top: auto !important; }
  .principle-stack .keep-scrolling{ display: none; }
}

/* Schrift */
.concept-card h4{ display: block; text-align: center; }                         /* Kap. 3: „1. Collect / Data“ brach falsch */
.concept-card h4 .emoji{ display: block; width: max-content; margin: 0 auto 10px; }
h2, h3, h4, .section-subhead, .cn-next-t, .sg-title{ text-wrap: balance; }      /* kein einzelnes Wort in der letzten Zeile */
.info-callout p, .info-callout p:last-child{ font-size: var(--t-read, 18.5px); }
.career-card-back p{ font-size: var(--t-read, 18.5px); }
.pg-skip, .hype-zoom, .final-quiz-progress-label{ font-size: 15px !important; }
@media (max-width: 480px){
  /* Studienfächer Kap. 13 (zwei Spalten): lange Wörter nicht mitten im Wort trennen */
  .study-grid .career-card-front h4{ font-size: clamp(16px, 4.4vw, 19px); hyphens: manual; overflow-wrap: break-word; }
  .study-grid .career-card-front{ padding-left: 10px; padding-right: 10px; }
}
/* Umschlag auf kleinen, niedrigen Handys: Bild etwas kleiner, damit „Los geht's“ auf den ersten Bildschirm passt */
@media (max-width: 480px) and (max-height: 780px){
  .cv-art{ max-width: 210px; }
  .cv-face{ padding-top: 12px; }
  .cover-hero h1.title{ font-size: 40px; }
  .cv-sub{ font-size: 16.5px; }
  .cv-lede{ font-size: 16.5px !important; line-height: 1.45; }
}

/* Kap. 9 und Quiz-Knopf in der Palette (vorher Neongrün #00ff9f) */
.btn-cta.final-quiz-start, .btn-cta#finalQuizRetry{ background: var(--gold); }

/* Fokusring in „Lerne die Bande kennen“ dunkel statt Koralle (Kontrast) */
.gd-deck:focus-visible, .gd-chips a:focus-visible, .gd-arrow:focus-visible, .gd-face:focus-visible{ outline-color: var(--ink); }
/* Berufe Kap. 12 am Handy in zwei Spalten wie die Studienfächer (Kap. 13): halb so lang */
@media (max-width: 620px){
  #ch12 .career-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #ch12 .career-card-front h4{ font-size: clamp(16px, 4.4vw, 19px); hyphens: manual; overflow-wrap: break-word; }
  #ch12 .career-card-front{ padding-left: 10px; padding-right: 10px; }
}

/* Umschlag mit elf Kindern (31.10.2026): gleichmäßig im Kreis um die Wolke */
  .cv-kid.k1{ left: 4.1%; top: 23.9%; width: 17.5%; --r: -8deg; animation-delay: 0.42s; }
  .cv-kid.k2{ left: 19.9%; top: 7.1%; width: 16.5%; --r: 6deg; animation-delay: 0.49s; }
  .cv-kid.k3{ left: 41.6%; top: 0.3%; width: 17.5%; --r: -5deg; animation-delay: 0.56s; }
  .cv-kid.k4{ left: 64.2%; top: 7.4%; width: 16.5%; --r: 8deg; animation-delay: 0.63s; }
  .cv-kid.k5{ left: 78.7%; top: 24.5%; width: 17.5%; --r: -6deg; animation-delay: 0.70s; }
  .cv-kid.k6{ left: 82.3%; top: 47.9%; width: 16.5%; --r: 5deg; animation-delay: 0.77s; }
  .cv-kid.k7{ left: 72.0%; top: 68.3%; width: 17.5%; --r: -7deg; animation-delay: 0.84s; }
  .cv-kid.k8{ left: 53.0%; top: 81.2%; width: 16.5%; --r: 6deg; animation-delay: 0.91s; }
  .cv-kid.k9{ left: 29.4%; top: 80.5%; width: 17.5%; --r: -4deg; animation-delay: 0.98s; }
  .cv-kid.k10{ left: 10.6%; top: 68.4%; width: 16.5%; --r: 7deg; animation-delay: 1.05s; }
  .cv-kid.k11{ left: 0.6%; top: 46.8%; width: 17.5%; --r: -6deg; animation-delay: 1.12s; }
/* Elf Gesichter unter dem Freunde-Stapel: am Handy in zwei Reihen, 40 px groß (vorher eine Reihe mit 29–34 px) */
@media (max-width: 760px){
  .gd-faces{ flex-wrap: wrap; gap: 8px; max-width: 304px; margin-left: auto; margin-right: auto; }
  .gd-face{ width: 40px; height: 40px; }
}
@media (max-width: 374px){ .gd-face{ width: 38px; height: 38px; } .gd-faces{ gap: 7px; max-width: 290px; } }

/* ===== Handy-UX-Gremium, Paket 2 (31.10.2026) ===== */
/* Alltagskarten Kap. 7/8 am Handy: zwei Spalten Kacheln, Rückseite im Blatt (guide.js Teil 20) */
@media (max-width: 600px){
  .flip-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 24px 0 40px; }
  .flip-grid .flip-card, .flip-grid.has-image-cards .flip-card{ aspect-ratio: 1 / 1.05 !important; perspective: none; }
  .flip-card.is-flipped .flip-inner{ transform: none; }
  .flip-grid .flip-back{ display: none; }
  .flip-front{ flex-direction: column; gap: 8px; padding: 12px 8px; text-align: center; }
  .flip-front .flip-emoji{ font-size: 46px; }
  .flip-front h4{ font-size: clamp(16px, 4.6vw, 19px) !important; line-height: 1.15; hyphens: manual; overflow-wrap: break-word; }
  .flip-card.pr-seen .flip-front::after, .flip-card.is-flipped .flip-front::after{
    content: "✓"; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; background: var(--quiz-green); color: #fff;
    border: 2px solid var(--ink); font: 900 14px/1 Inter, system-ui, sans-serif; }
}
.fc-sheet{ position: fixed; inset: 0; z-index: 120; background: rgba(21,23,26,.55); display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .2s ease; }
.fc-sheet[hidden]{ display: none; }
.fc-sheet.is-open{ opacity: 1; }
.fc-panel{ position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); border: 2px solid var(--ink); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 22px 20px 28px;
  box-shadow: 0 -8px 40px -12px rgba(0,0,0,.4); transform: translateY(24px); transition: transform .25s cubic-bezier(.2,.8,.2,1); color: var(--ink); }
.fc-sheet.is-open .fc-panel{ transform: none; }
.fc-x{ position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: var(--paper);
  font: 900 18px/1 Inter, system-ui, sans-serif; color: var(--ink); cursor: pointer; z-index: 1; }
.fc-x:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
.fc-body h4{ font-family: "Fraunces", serif; font-weight: 800; font-size: 24px; margin: 4px 56px 12px 0; }
.fc-body ul{ list-style: none; margin: 0 0 16px; padding: 0; font-size: var(--t-read, 18.5px); line-height: 1.55; }
.fc-body ul li{ margin-bottom: 6px; }
.fc-body p{ font-size: var(--t-read, 18.5px); line-height: 1.55; margin: 0 0 16px; }
.fc-body .flip-back-img{ display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 14px; border: 2px solid var(--ink); margin: 6px auto 0; }
html.fc-lock{ overflow: hidden; }
@media (prefers-reduced-motion: reduce){ .fc-sheet, .fc-panel{ transition: none; } }

/* Hilfekarten Kap. 5 („KI kann Kindern helfen“): am Handy zwei Spalten */
@media (max-width: 480px){
  .help-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .help-card{ padding: 14px 10px; }
  .help-card p{ font-size: 16px !important; line-height: 1.3; hyphens: auto; }
}

/* Breiter als 600 px: Karte wächst mit, wenn die Schrift größer gestellt ist (vorher abgeschnitten) */
@media (min-width: 601px){
  .flip-inner{ display: grid; height: auto; min-height: 100%; }
  .flip-front, .flip-back{ position: relative; inset: auto; grid-area: 1 / 1; min-height: 100%; }
  .flip-card{ height: auto; }
}
/* Glossar kompakt (guide.js Teil 21) */
#guide-glossary .gw-groups{ gap: 12px; }
#guide-glossary .gw-head{ margin: 0; }
.gw-toggle{ width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; padding: 10px 14px; min-height: 52px;
  box-shadow: 3px 3px 0 var(--ink); color: var(--ink); font: inherit; }
.gw-toggle:hover{ background: #FFF8D6; }
.gw-toggle:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
.gw-toggle .gw-title{ flex: 1 1 auto; min-width: 0; }
.gw-meta{ flex: none; font: 700 14px/1.2 Inter, system-ui, sans-serif; color: var(--ink-soft); white-space: nowrap; }
.gw-caret{ flex: none; font-size: 18px; transition: transform .2s ease; }
.gw-group:not(.gw-closed) .gw-caret{ transform: rotate(180deg); }
.gw-group:not(.gw-closed) .gw-toggle{ background: #FFF8D6; }
#guide-glossary .gw-group:not(.gw-closed) dl{ margin-top: 14px; }
.gw-openall{ min-height: 44px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 700 15px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.gw-openall:hover{ background: var(--gold); }
@media (max-width: 480px){ .gw-meta{ font-size: 13px; } .gw-toggle{ padding: 8px 12px; gap: 8px; } }
@media (prefers-reduced-motion: reduce){ .gw-caret{ transition: none; } }
#guide-glossary .gw-group dl[hidden]{ display: none !important; }
/* Kopfzeile am Handy: Logo und Erwachsenen-Knopf mit 44 px Trefferfläche */
@media (max-width: 760px){
  header.site a.brand{ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }
  header.site .gu-btn{ width: 44px; height: 44px; }
}
/* Sprachdialog: Seite dahinter wirklich gesperrt; im Querformat kleiner Globus, alles erreichbar */
html:has(body.lg-locked){ overflow: hidden; }
@media (max-height: 500px){
  .lg-ask{ place-items: start center; padding: 12px 16px; }
  .lg-inner{ gap: 8px; }
  .lg-stage{ width: clamp(110px, 28vh, 150px); }
  .lg-ask h2{ font-size: 24px; }
}
/* Hype-Kurve: Achsenbeschriftung lesbar (vorher Türkis auf Weiß, 1,9:1) */
.hype-axis{ fill: #0B7A73; }
@media (max-height: 500px) and (min-width: 640px){
  .lg-cards{ display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; width: 100%; }
  .lg-cards button{ min-width: 0; padding-left: 4px; padding-right: 4px; }
}
/* Kap. 2: Vergleich Gehirn – KI und Ablauf „So lernt KI“ (guide.js Teil 23) */
.concept-grid.is-vs{ display: flex; flex-direction: column; gap: 22px; }
.vs-board{ border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink); overflow: hidden; background: var(--paper); }
.vs-top{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
.vs-h{ margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 12px 16px; text-align: center;
  font-family: "Fraunces", serif; font-weight: 800; font-size: 24px; line-height: 1.15; }
.vs-h.vs-a{ background: var(--teal); color: var(--ink); }
.vs-h.vs-b{ background: var(--jet); color: #fff; }
.vs-emo{ font-size: 46px; line-height: 1; }
.vs-badge{ align-self: center; margin: 0 -22px; z-index: 1; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--gold); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 900 18px/1 "Fraunces", serif; color: var(--ink); }
.vs-rows{ list-style: none; margin: 0; padding: 0; }
.vs-row{ display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--ink); }
.vs-cell{ padding: 12px 18px; font-size: var(--t-card, 18px); line-height: 1.4; }
.vs-cell.vs-a{ background: #DFF6F4; color: var(--ink); border-right: 2px solid var(--ink); }
.vs-cell.vs-b{ background: #3A424B; color: #fff; }
.vs-cell.vs-b .glossary-link{ color: #fff; }
.learn-flow{ border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink); background: var(--green); padding: 20px 22px 22px; }
.learn-h{ margin: 0 0 14px; font-family: "Fraunces", serif; font-weight: 800; font-size: 24px; display: flex; align-items: center; gap: 10px; }
.learn-h span{ font-size: 34px; }
.learn-steps{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
.learn-step{ position: relative; background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; padding: 30px 12px 14px; text-align: center;
  font-size: var(--t-card, 18px); line-height: 1.35; color: var(--ink); }
.learn-n{ position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--gold);
  border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; font: 900 16px/1 Inter, system-ui, sans-serif; }
.learn-step:not(:last-child)::after{ content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font: 900 20px/1 Inter, system-ui, sans-serif; color: var(--ink); }
#ch2 .learn-flow{ margin-top: 6px; }
@media (max-width: 900px){
  .learn-steps{ grid-template-columns: 1fr; gap: 24px; }
  .learn-step{ text-align: left; padding: 12px 14px 12px 54px; }
  .learn-n{ top: 50%; left: 12px; transform: translateY(-50%); }
  .learn-step:not(:last-child)::after{ content: "↓"; right: auto; left: 22px; top: auto; bottom: -24px; transform: none; font-size: 18px; }
}
@media (max-width: 480px){
  .vs-h{ font-size: 18px; padding: 14px 8px 12px; }
  .vs-emo{ font-size: 36px; }
  .vs-badge{ width: 42px; height: 42px; font-size: 15px; margin: 0 -18px; }
  .vs-cell{ padding: 10px 10px; font-size: 16.5px; hyphens: auto; }
  .learn-flow{ padding: 18px 14px 18px; }
}
@media (max-width: 480px){ .vs-cell{ hyphens: manual; overflow-wrap: break-word; } }
/* Sehr schmale Handys (unter 360 px): Kopfzeile wie vorher, sonst wird „Chapters“ abgeschnitten */
@media (max-width: 359px){
  header.site a.brand{ min-width: 0; min-height: 0; }
  header.site .gu-btn{ width: 40px; height: 40px; }
}


/* ===== Kap. 2: erst raten, dann aufdecken (31.10.2026) ===== */
.vs-hint[hidden], .vs-score[hidden]{ display: none; }
.vs-hint{ margin: 0; padding: 10px 16px; border-top: 2px solid var(--ink); background: #FFF6C9; color: var(--ink); font-weight: 700; font-size: 16px; text-align: center; }
.vs-score{ margin: 0; padding: 12px 16px; border-top: 2px solid var(--ink); background: #BDF2D0; color: var(--ink); font-family: "Fraunces", serif; font-weight: 800; font-size: 19px; text-align: center; }
.vs-row{ position: relative; }
.vs-row.is-closed:not(.is-open) .vs-ans{ display: none; }
.vs-guess{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vs-opt{ min-height: 40px; padding: 4px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #FFE066; color: var(--ink);
  font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 2px 2px 0 #111; }
.vs-opt:hover{ background: #fff; }
.vs-opt:active{ transform: translate(1px, 1px); box-shadow: 1px 1px 0 #111; }
.vs-opt:focus-visible{ outline: 3px solid #fff; outline-offset: 2px; }
.vs-chip{ display: table; margin: 0 0 6px; padding: 2px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 800; line-height: 1.5; color: var(--ink); }
.vs-chip.is-ok{ background: #BDF2D0; }
.vs-chip.is-wow{ background: #FFE066; }
.vs-row.is-open .vs-ans, .vs-row.is-open .vs-chip{ animation: vsIn .35s ease both; }
@keyframes vsIn{ from{ opacity: 0; transform: translateX(-10px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .vs-row.is-open .vs-ans, .vs-row.is-open .vs-chip{ animation: none; } }
.vs-cell.vs-b:focus{ outline: none; }
@media (max-width: 620px){
  .vs-guess{ gap: 6px; }
  .vs-opt{ min-height: 36px; padding: 2px 10px; font-size: 14px; }
  .vs-hint{ font-size: 15px; }
  .vs-score{ font-size: 17px; }
}
/* Spalten nie breiter als die Hälfte; lange Wörter (z. B. griechisch „συμφραζόμενα“) dürfen umbrechen */
.vs-row{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 400px){ .vs-cell{ overflow-wrap: anywhere; hyphens: auto; } }

/* ===== Kap. 7: „Welche KI nutzt du?“ (31.10.2026) ===== */
.my-ai{ margin-top: 56px; }
.my-ai-head{ text-align: center; max-width: 640px; margin: 0 auto 22px; }
.my-ai-icon{ display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-size: 32px; margin-bottom: 10px; }
.my-ai-head h4{ font-family: "Fraunces", serif; font-weight: 800; font-size: clamp(24px, 3.4vw, 32px); line-height: 1.15; margin: 0 0 8px; color: var(--ink); }
.my-ai-head p{ margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.my-ai-grid{ list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.my-ai-chip{ position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 14px 16px 14px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: 4px 4px 0 var(--ink); font: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.my-ai-chip:hover{ transform: translate(-1px, -2px); box-shadow: 5px 6px 0 var(--ink); }
.my-ai-chip:active{ transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.my-ai-chip:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
.my-ai-emo{ font-size: 28px; line-height: 1; margin-bottom: 4px; }
.my-ai-chip strong{ font-size: 17px; line-height: 1.25; padding-right: 30px; }
.my-ai-sub{ font-size: 14.5px; line-height: 1.4; color: var(--ink-soft); }
.my-ai-chip.is-none{ background: #FFF6C9; }
.my-ai-chip.is-on{ background: #BDF2D0; }
.my-ai-chip.is-on::after{ content: "✓"; position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #1B9E4B; color: #fff; font-weight: 800; font-size: 16px; border: 2px solid var(--ink); }
.my-ai-result{ background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink);
  padding: 18px 22px; margin: 0 0 32px; text-align: center; }
.my-ai-result p{ margin: 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
.my-ai-count{ font-family: "Fraunces", serif; font-weight: 800; font-size: 21px !important; }
.my-ai-age{ margin-top: 10px !important; font-size: 16px !important; }
.my-ai-copy{ margin-top: 14px; }
.my-ai-steps{ margin-top: 0; }
@media (max-width: 900px){ .my-ai-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){
  .my-ai-grid{ gap: 10px; }
  .my-ai-chip{ padding: 12px 12px; box-shadow: 3px 3px 0 var(--ink); }
  .my-ai-chip strong{ font-size: 16px; padding-right: 22px; }
  .my-ai-sub{ font-size: 14px; }
  .my-ai-emo{ font-size: 24px; }
  .my-ai-chip.is-on::after{ width: 24px; height: 24px; font-size: 14px; top: 8px; right: 8px; }
}
@media (max-width: 340px){ .my-ai-grid{ grid-template-columns: 1fr; } }

/* ===== Memory-Spiel (Teil 25, 31.10.2026): gemeinsamer Baustein für .flip-grid[data-memory] =====
   Bildkarte: Bild mit Emoji und Name. Textkarte: nur der Text, gut lesbar (Jan: die Kinder sollen den Text lesen
   und verstehen). Karten sind so hoch wie ihr Inhalt; auf dem Laptop sind alle Reihen gleich hoch. */
.mem{ max-width: 1000px; margin: 0 auto 56px; }
.mem-bar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-bottom: 18px; }
.mem-pairs, .mem-moves{ font-weight: 800; font-size: 17px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; }
.mem-again{ min-height: 44px; padding: 6px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink);
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.mem-again:active{ transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.mem-grid{ display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 16px; }   /* alle Reihen gleich hoch: die Höhe verrät nicht, wo Bildkarten liegen */
.mem-card{ display: grid; min-height: 200px; color: var(--ink); perspective: 1200px; cursor: pointer; border-radius: 16px; }
.mem-card.is-done{ cursor: default; }
.mem-card:focus-visible{ outline: 3px solid var(--ink); outline-offset: 4px; }
.mem-inner{ display: grid; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,.7,.3,1); }
.mem-card.is-up .mem-inner, .mem-card.is-done .mem-inner{ transform: rotateY(180deg); }
.mem-face{ grid-area: 1 / 1; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mem-down{ display: flex; align-items: center; justify-content: center;
  background: var(--jet); background-image: radial-gradient(rgba(255,224,102,.22) 1.5px, transparent 1.6px); background-size: 14px 14px; }
.mem-down > span{ display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink);
  font-family: "Fraunces", serif; font-weight: 800; font-size: 34px; color: var(--ink); }
.mem-card[role="button"]:hover .mem-down{ background-color: #3A424B; }
.mem-up{ transform: rotateY(180deg); background: var(--paper); display: flex; flex-direction: column; }
.mem-card.is-pic .mem-up img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-bottom: 3px solid var(--ink); }
.mem-cap{ flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 10px 12px; text-align: center; }
.mem-emo{ font-size: 26px; line-height: 1; }
.mem-name{ font-family: "Fraunces", serif; font-weight: 800; font-size: 21px; line-height: 1.15; hyphens: auto; overflow-wrap: anywhere; }
.mem-card.is-txt .mem-up{ justify-content: center; background: var(--paper); color: var(--ink); }
.mem-text{ display: block; padding: 16px 16px 16px; }
.mem-text ul{ margin: 0; padding-left: 20px; font-size: 17px; line-height: 1.45; color: inherit; }
.mem-text p{ margin: 0; font-size: 17px; line-height: 1.45; }
.mem-text li + li{ margin-top: 6px; }
.mem-text .glossary-link{ color: inherit; }
.mem-card.is-done .mem-face{ box-shadow: 0 0 0 4px #1B9E4B, 4px 4px 0 4px var(--ink); }
.mem-card.is-done{ position: relative; }
.mem-card.is-done::after{ content: "✓"; position: absolute; top: -8px; right: -8px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #1B9E4B; color: #fff; font-weight: 800; font-size: 15px; border: 2px solid var(--ink); }
.mem-card.is-miss .mem-face{ animation: memShake .4s ease .3s; }
@keyframes memShake{ 25%{ translate: -5px 0; } 50%{ translate: 5px 0; } 75%{ translate: -3px 0; } }
.mem-say{ min-height: 1.5em; margin: 16px 0 0; text-align: center; font-weight: 800; font-size: 19px; color: var(--ink); }
.mem.is-won .mem-say{ font-family: "Fraunces", serif; font-size: 23px; }
@media (prefers-reduced-motion: reduce){ .mem-inner{ transition: none; } .mem-card.is-miss .mem-face{ animation: none; } }
@media (max-width: 860px){ .mem-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px){
  .mem-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; gap: 12px; }   /* Handy: gleich hohe Reihen wären über 2600 px lang */
  .mem-card{ min-height: 150px; }
  .mem-face{ border-width: 2px; border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
  .mem-card.is-pic .mem-up img{ border-bottom-width: 2px; }
  .mem-text{ padding: 12px 10px 12px; }
  .mem-text ul, .mem-text p{ font-size: 15.5px; padding-left: 17px; }
  .mem-text li + li{ margin-top: 5px; }
  .mem-cap{ flex-direction: column; gap: 4px; padding: 8px 6px 10px; }
  .mem-emo{ font-size: 22px; }
  .mem-name{ font-size: 17px; }
  .mem-down > span{ width: 52px; height: 52px; font-size: 28px; }
  .mem-pairs, .mem-moves{ font-size: 15px; padding: 5px 10px; }
  .mem-say{ font-size: 17px; }
}


/* ===== Lernlogik (31.10.2026): Start-Kasten und Marken 📖 Entdecken · 🎮 Spiel · ❓ Frage ===== */
.how-chapter{ margin: 0 0 36px; }
.how-chapter-kicker{ margin: 0 0 16px; text-align: center; font-family: "Fraunces", serif; font-weight: 800; font-size: clamp(22px, 3vw, 28px); color: var(--ink); }
.how-steps{ margin-bottom: 16px; }
.how-steps .gallery-step p strong{ display: block; font-family: "Fraunces", serif; font-size: 20px; margin-bottom: 4px; }
.how-chapter-sub{ margin: -8px 0 16px; text-align: center; font-size: 17px; font-weight: 600; color: var(--ink-soft); }
.how-tips{ list-style: none; margin: 0; padding: 18px 22px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px;
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink); }
.how-tips li{ display: flex; align-items: flex-start; gap: 12px; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.how-ico{ flex: none; font-size: 22px; line-height: 1.2; width: 30px; text-align: center; }
.step-line{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
.step-line.is-solo{ margin: 0 0 14px; }
.step-line.is-in{ margin: -20px 0 22px; }   /* Marke unter der eigenen Trennlinie eines Teils */
.step-chip{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 9px; border: 2px solid var(--ink); border-radius: 999px;
  font-size: 14px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; line-height: 1.4; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.step-chip.is-explore{ background: #DFF6F4; }
.step-chip.is-game{ background: #FFE066; }
.step-chip.is-question{ background: #FFD3E0; }
@media (max-width: 600px){
  .step-chip{ font-size: 13px; padding: 2px 10px 2px 8px; }
  .how-steps .gallery-step p strong{ font-size: 18px; }
  .how-tips{ grid-template-columns: 1fr; padding: 16px; }
  .how-tips li{ font-size: 16px; }
}


/* ===== Bild mit Stellen zum Antippen (Teil 27, 31.10.2026): Bandenbild öffnet die Karte jedes Kindes ===== */
figure.has-spots{ position: relative; }
.spots{ position: absolute; pointer-events: none; }
.spot{ position: absolute; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.spot-ring{ position: absolute; inset: 6%; border-radius: 50%; border: 4px solid #FFE066; box-shadow: 0 0 0 3px var(--ink); opacity: 0; transform: scale(.9); transition: opacity .15s ease, transform .15s ease; }
.spot-name{ position: absolute; left: 50%; top: 100%; transform: translate(-50%, -6px); padding: 3px 12px; border: 2px solid var(--ink); border-radius: 999px; background: #FFE066;
  color: var(--ink); font-weight: 800; font-size: 15px; white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); opacity: 0; transition: opacity .15s ease; z-index: 2; }
.spot:hover .spot-ring, .spot:focus-visible .spot-ring{ opacity: 1; transform: none; }
.spot:hover .spot-name, .spot:focus-visible .spot-name{ opacity: 1; }
.spot:focus-visible{ outline: none; }
.spot:active .spot-ring{ opacity: 1; }
.spots-hint{ margin: 10px 0 0; text-align: center; font-weight: 700; font-size: 16px; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce){ .spot-ring, .spot-name{ transition: none; } }
/* Die Gesichterreihe unter dem Stapel entfällt; die Knöpfe bleiben unsichtbar für den Umschlag erhalten. */
.has-gang-spots .gd-faces{ display: none; }
@media (max-width: 600px){ .spot-name{ font-size: 13px; padding: 2px 9px; } .spots-hint{ font-size: 15px; } }


/* ===== Umschlag mit dem Gruppenbild (Vorschlag A, 31.10.2026) ===== */
.cv-face{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.cv-art.cv-art-photo{ aspect-ratio: auto; max-width: 600px; display: block; }
.cv-photo{ margin: 0; position: relative; transform: rotate(1.6deg); border: 3px solid var(--ink); border-radius: 18px; overflow: hidden;
  background: var(--paper); box-shadow: 7px 7px 0 var(--ink); }
.cv-photo img{ display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 50%; }
.cv-photo .spots-hint{ margin: 0; padding: 8px 12px 10px; background: var(--paper); border-top: 3px solid var(--ink); }
@media (max-width: 900px){
  .cv-face{ grid-template-columns: 1fr; }
  .cv-art.cv-art-photo{ max-width: 560px; justify-self: center; margin-bottom: 18px; }
  .cv-photo{ transform: rotate(-1deg); }
}
@media (max-width: 560px){ .cv-art.cv-art-photo{ max-width: none; } .cv-photo{ box-shadow: 4px 4px 0 var(--ink); border-radius: 14px; } }
@media (max-width: 480px) and (max-height: 780px){ .cv-art.cv-art-photo{ max-width: none; } }


/* ===== Die Bande im Buch (Teil 28, Vorschau 31.10.2026) ===== */
.has-book #meet-the-gang{ display: none; }
.cv-meet{ display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px; border: 3px solid var(--ink); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: inherit; font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); }
.cv-meet:hover{ background: #fff; }
.cv-meet:active{ transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.cv-cover.is-open .cv-face{ display: none; }
.cv-pages{ position: relative; grid-column: 2; display: flex; flex-direction: column; padding: clamp(18px, 3vw, 34px) clamp(18px, 3.4vw, 44px) clamp(18px, 3vw, 30px); background: #FFFDF4; }
.cv-pages[hidden]{ display: none; }
.bk-spread{ flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 3px solid var(--ink); border-radius: 14px; overflow: hidden; background: #fff;
  box-shadow: 5px 5px 0 var(--ink); position: relative; transform-origin: 50% 50%; }
.bk-spread::after{ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 26px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.10) 45%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.10) 55%, rgba(0,0,0,0)); }
.bk-page{ min-width: 0; }
.bk-left{ background: var(--paper); }
.bk-img{ display: block; width: 100%; height: 100%; min-height: 360px; max-height: 70vh; object-fit: cover; object-position: 50% 25%; }
.bk-right{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(18px, 2.6vw, 34px) clamp(18px, 2.8vw, 36px); background: #FFFDF4; }
.bk-kicker{ margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.bk-name{ margin: 0; font-family: "Fraunces", serif; font-weight: 900; font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--bk-c, var(--gold)); text-decoration-thickness: 8px; text-underline-offset: 6px; text-decoration-skip-ink: none; outline: none; }
.bk-about{ margin: 6px 0 0; font-size: 18px; line-height: 1.45; color: var(--ink); }
.bk-say{ margin: 0; font-family: "Fraunces", serif; font-weight: 700; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.35; color: var(--ink); }
.bk-chips .gd-chips{ margin: 4px 0 0; padding: 0; justify-content: flex-start; text-align: left; }
.bk-chips .gd-chips > span{ width: 100%; text-align: left; }
.bk-nav{ margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 12px; width: 100%; }
.bk-count{ font-weight: 800; font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.bk-arrow{ flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 3px solid var(--ink); border-radius: 50%;
  background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.bk-arrow svg{ width: 22px; height: 22px; }
.bk-arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; }
.bk-arrow[hidden], .bk-go[hidden]{ display: none; }
.bk-go{ margin: 0 0 0 auto; }
.bk-next{ margin-left: auto; }
.bk-close{ align-self: flex-end; order: -1; margin: 0 0 12px; padding: 6px 14px; min-height: 40px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper);
  color: var(--ink); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.bk-spread.is-turn-r{ animation: bkTurnR .45s cubic-bezier(.3,.7,.3,1); }
.bk-spread.is-turn-l{ animation: bkTurnL .45s cubic-bezier(.3,.7,.3,1); }
@keyframes bkTurnR{ from{ transform: perspective(1400px) rotateY(-14deg) translateX(30px); opacity: .2; } to{ transform: none; opacity: 1; } }
@keyframes bkTurnL{ from{ transform: perspective(1400px) rotateY(14deg) translateX(-30px); opacity: .2; } to{ transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce){ .bk-spread.is-turn-r, .bk-spread.is-turn-l{ animation: none; } }
@media (max-width: 760px){
  .bk-spread{ grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; }
  .bk-spread::after{ display: none; }
  .bk-img{ height: auto; min-height: 0; aspect-ratio: 4 / 3; border-bottom: 3px solid var(--ink); }
  .bk-right{ padding: 16px 16px 14px; gap: 8px; }
  .bk-name{ font-size: 34px; text-decoration-thickness: 6px; }
  .bk-about{ font-size: 16.5px; margin-top: 2px; }
  .bk-say{ font-size: 18px; }
  .cv-pages{ padding: 14px 12px 16px; }
  .bk-arrow{ width: 44px; height: 44px; }
}
@media (max-width: 560px){ .cv-pages{ grid-column: 2; } .cv-actions .cv-meet{ order: 2; } }

/* Buch: Lesezeichen, Wisch-Hinweis (31.10.2026) */
.bk-tabs{ display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; }
.bk-tab{ width: 44px; height: 44px; padding: 0; border: 3px solid var(--ink); border-radius: 50%; overflow: hidden; background: var(--paper); cursor: pointer;
  opacity: .7; transition: transform .15s ease, opacity .15s ease; }
.bk-tab img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.bk-tab:hover{ opacity: 1; transform: translateY(-2px); }
.bk-tab[aria-current="true"]{ opacity: 1; box-shadow: 0 0 0 4px var(--bk-c, var(--gold)); transform: scale(1.08); }
.bk-tab:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
.bk-swipe{ margin: 4px 0 0; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; background: #FFE066; color: var(--ink);
  font-weight: 800; font-size: 15px; box-shadow: 2px 2px 0 var(--ink); width: fit-content; }
.bk-swipe[hidden]{ display: none; }
/* Bild mit Stellen: einmaliges Aufleuchten ohne Maus */
.spot.is-hint .spot-ring{ opacity: 1; transform: none; }
@media (max-width: 560px){ .bk-tabs{ gap: 6px; } .bk-tab{ width: 40px; height: 40px; border-width: 2px; } }

/* Buch auf kleinen, niedrigen Handys: Bild flacher, damit die Blätter-Pfeile näher an den ersten Bildschirm rücken */
@media (max-width: 400px) and (max-height: 780px){ .bk-img{ aspect-ratio: 16 / 9; } .bk-say{ font-size: 17px; } }

/* ===== Abschied: ein Tipp von jedem Kind (31.10.2026), Stapel = gemeinsamer Baustein der Bande ===== */
.farewell-tips{ margin-top: 48px; }
.farewell-h{ margin: 0 0 8px; text-align: center; font-family: "Fraunces", serif; font-weight: 800; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.15; color: var(--ink); }
.farewell-tips .gang-card > p:not(.gang-say){ font-weight: 800; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }


/* ===== „Im Text finden“ (Teil 29, 31.10.2026) ===== */
.qz-again{ max-width: 640px; margin: 14px auto 0; padding: 12px 16px; border: 3px solid var(--ink); border-radius: var(--radius); background: #FFF6C9;
  box-shadow: 4px 4px 0 var(--ink); text-align: center; }
.qz-again[hidden]{ display: none; }
.qz-again p{ margin: 0 0 10px; font-weight: 800; font-size: 17px; color: var(--ink); }
.qz-find{ min-height: 44px; padding: 6px 18px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-weight: 800; font-size: 16px;
  cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.qz-find[hidden]{ display: none; }
.qz-find:active{ transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.quiz-option.qz-tried{ opacity: .55; text-decoration: line-through; text-decoration-thickness: 2px; }
.qz-found{ background: #FFE066 !important; color: var(--ink) !important; box-shadow: 0 0 0 4px #FFE066, 0 0 0 7px var(--ink); border-radius: 6px; animation: qzFound 1s ease 2; }
@keyframes qzFound{ 50%{ box-shadow: 0 0 0 8px #FFE066, 0 0 0 11px var(--ink); } }
@media (prefers-reduced-motion: reduce){ .qz-found{ animation: none; } }
.qz-back{ position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; min-height: 48px; padding: 8px 20px;
  border: 3px solid var(--ink); border-radius: 999px; background: #FFE066; color: var(--ink); font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 4px 4px 0 var(--ink); }
.qz-back[hidden]{ display: none; }
.mem-card.is-peek .mem-inner{ transform: rotateY(180deg); }

/* KI-Pinnwand noch nicht eingerichtet (Schalter: Claude outputs/ki_pinnwand_schalter.py): Teilen ausblenden */
.my-ai[data-wall="off"] .my-ai-share{ display: none !important; }
@media (min-width: 761px){ .my-ai[data-wall="off"] .my-ai-steps{ grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; } }
.my-ai-copy[hidden], .my-ai-result [hidden]{ display: none !important; }

/* Marken: Abstand nach oben, dicht an dem Teil, den sie benennen (Jan, 31.10.2026: „this looks odd“).
   Gilt für alle Marken: eigene Zeile, Hinweiszeile mit Marke und Teil direkt darunter. */
.step-line.is-solo:not(.is-in){ margin: 40px 0 12px; }
.step-line.is-solo:not(.is-in) + [data-step]{ margin-top: 0 !important; }
.flip-hint.step-line, .career-hint.step-line, .sc-hint.step-line{ margin-top: 40px; }


/* ===== Startseite: Figuren-Auswahl (Teil 30, Vorschau 31.10.2026) ===== */
.guide-hero.hero2{ padding: clamp(18px, 3vw, 36px) 0 clamp(30px, 4vw, 52px); }
.h2-stage{ position: relative; max-width: 1120px; margin: 0 auto; }
.h2-photo{ margin: 0; position: relative; border: 3px solid var(--ink); border-radius: 22px; overflow: hidden; box-shadow: 7px 7px 0 var(--ink); background: var(--paper); }
.h2-photo img{ display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 50% 50%; max-height: 62vh; }
.h2-card{ position: relative; z-index: 3; width: min(760px, calc(100% - 32px)); margin: -84px auto 0; padding: clamp(18px, 2.6vw, 30px) clamp(18px, 3vw, 36px);
  background: var(--gold); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 7px 7px 0 var(--ink); text-align: center; }
.hero2 h1.title{ margin: 0 0 10px; font-size: clamp(40px, 6vw, 76px); line-height: .95; letter-spacing: -0.02em; }
.hero2 .cv-sub{ margin: 0 auto 6px; max-width: 34ch; }
.hero2 .cv-lede{ margin: 0 auto 18px; max-width: 46ch; }
.hero2 .cv-actions{ justify-content: center; }
.h2-badge{ margin: 16px auto 0; display: inline-block; padding: 4px 14px; border: 2px dashed var(--ink); border-radius: 999px; background: rgba(255,255,255,.6);
  font-weight: 700; font-size: 15px; color: var(--ink); }
.h2-roster-wrap{ max-width: 1120px; margin: clamp(26px, 3.6vw, 40px) auto 0; text-align: center; }
.h2-roster-title{ margin: 0; font-family: "Fraunces", serif; font-weight: 900; font-size: clamp(26px, 3.4vw, 38px); color: var(--ink); }
.h2-roster-tap{ margin: 4px 0 16px; font-weight: 700; font-size: 16px; color: var(--ink); }
.h2-roster{ list-style: none; margin: 0; padding: 6px 4px 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; }
.ch-av{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); }
.ch-av-img{ display: block; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); background: var(--paper);
  box-shadow: 0 0 0 4px var(--ch-c, var(--paper)), 3px 4px 0 4px var(--ink); transition: transform .15s ease; }
.ch-av-img img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.ch-av.is-guide .ch-av-img{ background: #E8FBF8; }
.ch-av.is-guide .ch-av-img img{ object-fit: contain; padding: 6px; }
.ch-av-name{ font-weight: 800; font-size: 14.5px; line-height: 1.2; }
.ch-av-tag{ position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border: 2px solid var(--ink); border-radius: 999px; background: #FFE066;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ch-av:hover .ch-av-img, .ch-av:focus-visible .ch-av-img{ transform: translateY(-4px) scale(1.04); }
.ch-av:focus-visible{ outline: none; }
.ch-av:focus-visible .ch-av-name{ text-decoration: underline; text-decoration-thickness: 3px; }
/* Figurenkarte */
.ch-open, .ch-open body{ overflow: hidden; }
.ch-overlay{ position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(20,23,26,.55);
  opacity: 0; transition: opacity .2s ease; }
.ch-overlay[hidden]{ display: none; }
.ch-overlay.is-on{ opacity: 1; }
.ch-sheet{ position: relative; width: min(820px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #FFFDF4; border: 3px solid var(--ink); border-radius: 24px;
  box-shadow: 8px 8px 0 var(--ink); transform: translateY(16px) scale(.98); transition: transform .22s cubic-bezier(.3,.7,.3,1); }
.ch-overlay.is-on .ch-sheet{ transform: none; }
.ch-x{ position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink);
  font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.ch-body{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ch-pic{ background: var(--ch-c, var(--paper)); border-right: 3px solid var(--ink); }
.ch-pic img{ display: block; width: 100%; height: 100%; min-height: 340px; max-height: 70vh; object-fit: cover; object-position: 50% 25%; }
.ch-sheet.is-guide .ch-pic{ background: #E8FBF8; display: flex; align-items: center; justify-content: center; }
.ch-sheet.is-guide .ch-pic img{ object-fit: contain; height: auto; min-height: 0; width: 80%; padding: 20px 0; }
.ch-info{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 30px 30px 20px; }
.ch-kicker{ margin: 0; padding: 2px 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ch-c, var(--gold)); font-size: 13px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.ch-sheet:not(.is-guide) .ch-kicker{ background: #FFE066; }
.ch-name{ margin: 0; font-family: "Fraunces", serif; font-weight: 900; font-size: clamp(34px, 4vw, 50px); line-height: 1; color: var(--ink); outline: none; }
.ch-about{ margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink); }
.ch-say{ margin: 0; font-family: "Fraunces", serif; font-weight: 700; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.35; color: var(--ink); }
.ch-say[hidden]{ display: none; }
.ch-chips .gd-chips{ margin: 2px 0 0; padding: 0; justify-content: flex-start; text-align: left; }
.ch-chips .gd-chips > span{ width: 100%; text-align: left; }
.ch-nav{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 3px solid var(--ink); background: var(--paper); }
.ch-count{ font-weight: 800; font-size: 15px; color: var(--ink-soft); }
.ch-arrow{ width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 3px solid var(--ink); border-radius: 50%; background: #FFE066;
  color: var(--ink); cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.ch-arrow svg{ width: 22px; height: 22px; }
.ch-body.is-in-r{ animation: chInR .3s ease; } .ch-body.is-in-l{ animation: chInL .3s ease; }
@keyframes chInR{ from{ opacity: .2; transform: translateX(26px); } to{ opacity: 1; transform: none; } }
@keyframes chInL{ from{ opacity: .2; transform: translateX(-26px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .ch-overlay, .ch-sheet{ transition: none; } .ch-body.is-in-r, .ch-body.is-in-l{ animation: none; } }
/* Die Wolke stellt sich jetzt in der Reihe vor */
.has-roster .before-start .cloud-intro{ display: none; }
@media (max-width: 760px){
  .h2-photo{ border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .h2-photo img{ aspect-ratio: 3 / 2; }
  .h2-card{ margin-top: -36px; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); width: calc(100% - 20px); }
  .hero2 .cv-actions{ flex-direction: column; gap: 12px; }
  .h2-badge{ font-size: 14px; }
  .h2-roster{ flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 12px 16px 16px; scrollbar-width: none; }
  .h2-roster li{ scroll-snap-align: start; }
  .ch-av{ width: 76px; } .ch-av-img{ width: 66px; height: 66px; }
  .ch-overlay{ align-items: flex-end; padding: 0; }
  .ch-sheet{ width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; border-bottom: 0; box-shadow: none; transform: translateY(40px); }
  .ch-body{ grid-template-columns: 1fr; }
  .ch-pic{ border-right: 0; border-bottom: 3px solid var(--ink); }
  .ch-pic img{ height: auto; min-height: 0; aspect-ratio: 4 / 3; max-height: 38vh; }
  .ch-sheet.is-guide .ch-pic img{ width: auto; max-height: 26vh; aspect-ratio: auto; }
  .ch-info{ padding: 18px 18px 14px; gap: 8px; }
  .ch-name{ font-size: 34px; }
  .ch-about{ font-size: 16.5px; }
  .ch-say{ font-size: 18px; }
  .ch-nav{ position: sticky; bottom: 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}
/* Figuren-Auswahl: Feinschliff (31.10.2026) */
.h2-photo{ max-width: 920px; margin: 0 auto; }
@media (min-width: 761px){
  .h2-roster{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 8px; max-width: 1060px; margin: 0 auto; }
  .h2-roster li{ display: flex; justify-content: center; }
  .ch-av{ width: 100%; max-width: 84px; }
  .ch-av-img{ width: min(76px, 100%); height: auto; aspect-ratio: 1; }
}
@media (min-width: 761px) and (max-width: 1000px){ .h2-roster{ grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 620px; } }
.ch-av-tag{ position: static; transform: none; margin-top: -2px; padding: 0 7px; font-size: 10.5px; }
/* Jan 31.10.: Titelkarte überdeckt das Gruppenbild nicht mehr. Laptop: Karte links, Bild rechts; Handy: untereinander. */
.h2-card{ margin: 18px auto 0; }
@media (min-width: 1000px){
  .h2-stage{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: stretch; }
  .h2-stage .h2-photo{ order: 2; max-width: none; margin: 0; display: flex; }
  .h2-stage .h2-photo img{ height: 100%; max-height: none; aspect-ratio: auto; min-height: 380px; }
  .h2-card{ order: 1; width: auto; margin: 0; display: flex; flex-direction: column; justify-content: center; text-align: left; align-items: flex-start; }
  .hero2 .cv-sub, .hero2 .cv-lede{ margin-left: 0; margin-right: 0; }
  .hero2 .cv-actions{ justify-content: flex-start; }
  .h2-badge{ margin-left: 0; }
}
@media (max-width: 760px){ .h2-card{ margin-top: 14px; } }
/* Jan 31.10.: GR4AI ohne Kreis, mittig, etwas abgesetzt von der Bande */
.ch-av.is-guide .ch-av-img{ border: 0; box-shadow: none; background: none; border-radius: 0; overflow: visible; display: flex; align-items: center; justify-content: center; }
.ch-av.is-guide .ch-av-img img{ width: 128%; max-width: none; height: auto; object-fit: contain; padding: 0; }
.ch-av.is-guide:hover .ch-av-img, .ch-av.is-guide:focus-visible .ch-av-img{ transform: scale(1.08); }
.h2-roster li:first-child{ position: relative; }
@media (min-width: 761px){
  .h2-roster{ grid-template-columns: 1.3fr repeat(11, minmax(0, 1fr)); }
  .h2-roster li:first-child{ padding-right: 10px; margin-right: 6px; border-right: 3px dashed rgba(20,23,26,.35); }
}
@media (min-width: 761px) and (max-width: 1000px){ .h2-roster{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .h2-roster li:first-child{ border-right: 0; grid-column: 1 / -1; padding: 0; margin: 0 0 6px; } }
@media (max-width: 760px){ .h2-roster li:first-child{ padding-right: 12px; margin-right: 4px; border-right: 3px dashed rgba(20,23,26,.35); } }
/* Bild im ganzen zeigen: 16:10 schneidet nur Hauswand und Baum ab, alle elf Kinder bleiben ganz im Bild */
@media (min-width: 1000px){
  .h2-stage{ grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; }
  .h2-stage .h2-photo img{ height: auto; min-height: 0; aspect-ratio: 16 / 10; }
}
.ch-av.is-guide .ch-av-img img{ width: 150%; }
@media (max-width: 760px){
  .h2-roster{ scroll-padding-left: 16px; }
  .ch-av.is-guide{ width: 104px; }
  .ch-av.is-guide .ch-av-img img{ width: 130%; }
}
.ch-av-tag{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Jan 31.10.: „Los geht’s!“ und „Über das Projekt“ unter beide Karten; Karte und Bild gleich hoch, das Bild füllt
   seine Karte. Die kürzere Titelkarte lässt das Bild breit genug, dass alle Kinder ganz zu sehen sind. */
.h2-actions{ max-width: 1120px; margin: 22px auto 0; }
.h2-actions .cv-actions{ justify-content: center; }
@media (min-width: 1000px){
  .h2-stage{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; }
  .h2-stage .h2-photo{ display: block; }
  .h2-stage .h2-photo img{ width: 100%; height: 100%; aspect-ratio: auto; min-height: 0; object-fit: cover; object-position: 50% 45%; }
  .h2-card{ padding: 26px 30px; }
  .hero2 h1.title{ font-size: clamp(40px, 4.6vw, 64px); margin-bottom: 10px; }
  .hero2 .cv-lede{ margin-bottom: 0; }
}
@media (max-width: 760px){ .h2-actions{ margin-top: 18px; } .h2-actions .cv-actions{ flex-direction: column; gap: 12px; } }
/* 1000–1099 px: nebeneinander wäre das Bild zu schmal (ein Kind angeschnitten), also untereinander wie am Tablet */
@media (min-width: 1000px) and (max-width: 1099px){
  .h2-stage{ display: block; }
  .h2-stage .h2-photo{ max-width: 920px; margin: 0 auto; }
  .h2-stage .h2-photo img{ height: auto; aspect-ratio: 2 / 1; }
  .h2-card{ width: min(760px, calc(100% - 32px)); margin: 18px auto 0; text-align: center; align-items: center; }
  .hero2 .cv-sub, .hero2 .cv-lede{ margin-left: auto; margin-right: auto; }
}
.ch-av.is-guide{ max-width: none; }
.ch-av.is-guide .ch-av-tag{ max-width: none; overflow: visible; }
@media (min-width: 761px){ .h2-roster{ grid-template-columns: 1.5fr repeat(11, minmax(0, 1fr)); } }
/* Jan 31.10.: mehr Abstand zwischen Kreis (mit Rand und Schatten) und Name */
.ch-av{ gap: 14px; }
.ch-av.is-guide{ gap: 8px; }
.farewell-tips.is-after-quiz{ margin-top: 0; }

/* Abschied: Klassenzimmerbild groß, Satz darunter als Schlusszeile (Jan, 31.10.2026: „make better use of this group pic“) */
#guide-farewell .explain-card.quiz-card{ display: flex !important; flex-direction: column; align-items: center; gap: 30px; max-width: 760px; margin: 0 auto; }
#guide-farewell .quiz-photo.is-group{ width: 100%; max-width: 720px; height: auto; transform: rotate(-1.5deg); }
#guide-farewell .quiz-bubble{ width: 100%; max-width: 720px; text-align: center; padding: 22px 28px; }
#guide-farewell .quiz-bubble::before, #guide-farewell .quiz-bubble::after{ display: none; }
#guide-farewell .quiz-bubble p strong{ font-family: "Fraunces", serif; font-weight: 800; font-size: clamp(21px, 2.6vw, 30px); line-height: 1.3; }
@media (max-width: 760px){ #guide-farewell .explain-card.quiz-card{ gap: 20px; } #guide-farewell .quiz-bubble{ padding: 16px 18px; } }
/* Bild und Schlusszeile passen zusammen auf einen Laptop-Bildschirm */
#guide-farewell .quiz-photo.is-group{ max-width: min(620px, calc(100vh - 290px)); }
#guide-farewell .explain-card.quiz-card{ gap: 24px; }
/* Jan 31.10.: Kartenstapel (Bande und Abschiedstipps) mehr Luft unter dem letzten Text */
.gd .gang-card{ padding-bottom: 22px; }


/* ===== Experimente (Teil 31, 31.10.2026): gemeinsamer Baustein .xp ===== */
.xp{ max-width: 860px; margin: 0 auto 56px; background: var(--paper); border: 3px solid var(--ink); border-radius: var(--radius); box-shadow: 6px 6px 0 var(--ink);
  padding: clamp(18px, 3vw, 30px); color: var(--ink); }
.xp-fallback h4{ margin: 0 0 6px; font-family: "Fraunces", serif; font-size: 22px; }
.xp-fallback p{ margin: 0; }
.xp-head{ text-align: center; margin-bottom: 18px; }
.xp-icon{ display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #FFE066; border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); font-size: 28px; margin-bottom: 8px; }
.xp-title{ margin: 0 0 6px; font-family: "Fraunces", serif; font-weight: 800; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
.xp-intro{ margin: 0 auto; max-width: 60ch; font-size: 17px; line-height: 1.5; }
.xp-count{ margin: 0 0 8px; font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.xp-note{ margin: 0 0 12px; font-size: 16.5px; line-height: 1.5; }
.xp-q{ margin: 14px 0 12px; font-weight: 800; font-size: 18.5px; line-height: 1.4; outline: none; }
.xp-board{ margin: 6px 0 4px; }
.xp-cards{ display: flex; flex-wrap: wrap; gap: 10px; }
.xp-card{ position: relative; width: 92px; height: 104px; border: 3px solid var(--ink); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 6px; box-shadow: 3px 3px 0 var(--ink); overflow: hidden; }
.xp-card.is-in{ background: linear-gradient(#FBE9D2 0 62%, #C8A27A 62%); }
.xp-card.is-out{ background: linear-gradient(#BFE6FF 0 55%, #8FD18A 55%); }
.xp-bg{ position: absolute; top: 4px; right: 6px; font-size: 20px; }
.xp-animal{ font-size: 44px; line-height: 1; margin-bottom: 4px; }
.xp-label{ font-weight: 800; font-size: 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: 999px; padding: 0 8px; }
.xp-test{ display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.xp-test-l{ font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.xp-test .xp-card{ box-shadow: 0 0 0 4px #FFE066, 3px 3px 0 5px var(--ink); }
.xp-chat{ display: inline-flex; flex-direction: column; gap: 4px; max-width: 520px; padding: 12px 16px; border: 3px solid var(--ink); border-radius: 18px 18px 18px 4px; background: #E8FBF8; }
.xp-chat-from{ font-weight: 800; font-size: 14px; color: var(--ink-soft); }
.xp-chat-text{ font-size: 17px; line-height: 1.45; }
.xp-chat.is-voice .xp-chat-text{ font-weight: 700; }
.xp-opts{ display: flex; flex-direction: column; gap: 10px; }
.xp-opts.is-two{ flex-direction: row; flex-wrap: wrap; }
.xp-opts.is-two .xp-opt{ flex: 1 1 220px; }
.xp-opt{ min-height: 48px; padding: 10px 16px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; font-weight: 700; font-size: 16.5px;
  text-align: left; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); transition: transform .12s ease; }
.xp-opt:hover:not(:disabled){ transform: translate(-1px, -2px); }
.xp-opt:focus-visible, .xp-btn:focus-visible, .xp-bit:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; }
.xp-opt.is-tried{ opacity: .55; text-decoration: line-through; text-decoration-thickness: 2px; cursor: default; }
.xp-opt.is-right{ background: #BDF2D0; }
.xp-opt.is-off{ opacity: .45; }
.xp-opt:disabled{ cursor: default; }
.xp-fb{ margin-top: 14px; padding: 12px 16px; border: 3px solid var(--ink); border-radius: 14px; font-size: 16.5px; line-height: 1.5; }
.xp-fb[hidden]{ display: none; }
.xp-fb.is-ok{ background: #BDF2D0; }
.xp-fb.is-no{ background: #FFF6C9; }
.xp-btn{ display: inline-flex; align-items: center; min-height: 44px; margin: 12px 0 0; padding: 6px 18px; border: 3px solid var(--ink); border-radius: 999px; background: #FFE066; color: var(--ink);
  font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.xp-fb .xp-btn{ display: flex; margin-top: 12px; }
.xp-btn.is-ghost{ background: var(--paper); }
.xp-end{ text-align: center; padding: 8px 0 0; outline: none; }
.xp-done{ margin: 0 0 6px; font-family: "Fraunces", serif; font-weight: 800; font-size: 22px; }
.xp-endtext{ margin: 0 auto 6px; max-width: 58ch; font-weight: 700; font-size: 18px; line-height: 1.45; }
.xp-small{ margin: 6px auto 0; max-width: 58ch; font-size: 14.5px; color: var(--ink-soft); }
.xp-sortcard{ display: inline-block; padding: 10px 16px; border: 3px dashed var(--ink); border-radius: 12px; background: #fff; }
.xp-bins{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.xp-bin{ border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: #fff; min-height: 70px; }
.xp-bin:first-child{ background: #E8FBF8; } .xp-bin:last-child{ background: #F3E8FF; }
.xp-bin-h{ margin: 0 0 6px; font-weight: 800; font-size: 15px; }
.xp-bin-l{ margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.45; }
.xp-bits{ display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 6px 0 12px; }
.xp-bit{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.xp-lamp{ width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--ink); background: #d9d4c7; transition: background .15s ease, box-shadow .15s ease; }
.xp-bit.is-on .xp-lamp{ background: #FFE066; box-shadow: 0 0 14px 4px rgba(255,224,102,.9); }
.xp-bitval{ font-family: "Fraunces", serif; font-weight: 900; font-size: 22px; line-height: 1; }
.xp-place{ font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.xp-read{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 14px; background: var(--jet); color: #fff; font-weight: 800; font-size: 17px; }
.xp-bin-str{ font-family: ui-monospace, Menlo, monospace; letter-spacing: .18em; color: #FFE066; }
.xp-letter{ color: #7FE0D7; }
@media (prefers-reduced-motion: reduce){ .xp-opt, .xp-lamp{ transition: none; } }
@media (max-width: 600px){
  .xp{ box-shadow: 4px 4px 0 var(--ink); }
  .xp-card{ width: 74px; height: 88px; } .xp-animal{ font-size: 36px; }
  .xp-bins{ grid-template-columns: 1fr; }
  .xp-bits{ gap: 4px; } .xp-bit{ padding: 6px 0; border-width: 2px; } .xp-lamp{ width: 20px; height: 20px; border-width: 2px; } .xp-bitval{ font-size: 18px; } .xp-place{ font-size: 11px; }
  .xp-q{ font-size: 17.5px; }
}
.xp-bit{ min-width: 0; overflow: hidden; }
@media (max-width: 420px){ .xp-bits{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } }   /* schmale Handys: 2 Reihen zu je 4 Lampen */

/* Textlinks unter dem Startknopf: „Von vorn beginnen“ und „Über das Projekt“ sehen gleich aus (ein Baustein) */
.cv-actions .cv-restart, .cv-actions .cv-about{
  display: inline-block; margin: 0; font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.cv-actions .cv-restart:hover, .cv-actions .cv-about:hover{ text-decoration-color: var(--jet); background: rgba(255,255,255,.4); border-radius: 4px; }
.cv-actions .cv-restart[hidden]{ display: none; }

/* Quellen unter einer Zahl (Spaßfakt Kap. 7): klein, für Erwachsene, druckbar */
.fact-banner p.fact-src{ margin-top: 10px; font-size: 13px; line-height: 1.45; color: rgba(20,23,26,0.62); }
.fact-banner p.fact-src a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Experiment „Sei der Computer“: gemeinte Lampen gestrichelt markiert, bis sie an sind */
.xp-bit.is-hint{ outline: 3px dashed var(--ink); outline-offset: 3px; }
.xp-bit.is-hint .xp-place{ font-weight: 800; color: var(--ink); }

/* Kap. 2 „So lernt KI“: dieselben 6 Schritte wie Kap. 3, mit demselben Emoji über dem Titel */
.learn-steps{ grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 24px; }
.learn-t .emoji{ display: block; font-size: 30px; line-height: 1; margin-bottom: 6px; }
.learn-step{ overflow-wrap: break-word; }
@media (max-width: 900px){
  .learn-steps{ grid-auto-flow: row; grid-template-columns: 1fr; }
  .learn-t .emoji{ display: inline; font-size: 1.1em; margin: 0 4px 0 0; }
}

/* Schrittkarten (Galerie, Start-Kasten): Nummer und fetter Titel in einer Zeile, Text darunter über die ganze Breite.
   Vorher stand der Text schmal neben der Nummer und Karte 1 wurde doppelt so hoch wie die anderen (Jan, 31.10.2026). */
.gallery-step{ display: block; }
.gallery-step::after{ content: ""; display: block; clear: both; }
.gallery-step-num{ float: left; width: 46px; height: 46px; font-size: 23px; margin: 0 14px 8px 0; }
.gallery-step p{ padding-top: 0; font-size: 16.5px; line-height: 1.55; }
.gallery-step p strong{ display: flex; align-items: center; min-height: 46px; margin-bottom: 8px;
  font-family: "Fraunces", serif; font-weight: 800; font-size: 20px; line-height: 1.15; }
@media (max-width: 600px){ .gallery-step p strong{ font-size: 18px; } }
.how-steps .gallery-step p strong{ display: flex; margin-bottom: 8px; }

/* Quellen für Erwachsene (unten im Dank-Kasten, zugeklappt) */
.sources-adults{ margin-top: 18px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius); padding: 14px 18px; }
.sources-adults summary{ cursor: pointer; font-family: "Fraunces", serif; font-weight: 800; font-size: 18px; color: var(--ink); }
.sources-adults[open] summary{ margin-bottom: 8px; }
.sources-adults p, .sources-adults li{ font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.sources-adults p{ margin: 0 0 8px; }
.sources-adults ul{ margin: 0; padding-left: 20px; }
.sources-adults a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Kap. 3 Lernarten: Beispielzeile etwas abgesetzt */
.concept-card li.xp-eg{ margin-top: 6px; }
.concept-card li.xp-eg strong{ font-weight: 800; }

/* Sortierspiel: Karte wie eine Karte, Anleitung darunter, Ablage klar als Ergebnisbereich (Jan, 31.10.2026) */
.xp-sortcard{ border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #FFF7D6; transform: rotate(-1deg); }
.xp-how{ margin: 14px 0 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
.xp-binswrap{ margin-top: 22px; padding-top: 14px; border-top: 2px dashed rgba(20,23,26,.25); }
.xp-bins-t{ margin: 0 0 8px; font-size: 13.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.xp-binswrap .xp-bins{ margin-top: 0; }
.xp-bin{ border: 2px dashed var(--ink); box-shadow: none; }
.xp-bin-h{ font-size: 14px; }
.xp-bin-l:empty::before{ content: attr(data-empty); display: block; margin-left: -18px; font-style: italic; color: var(--ink-soft); }

/* Glossar: „Alle öffnen“ in derselben Zeile wie die Suche, gleich hoch, mit Abstand (Jan, 31.10.2026: „looks a little odd“) */
#guide-glossary .gw-tools{ display: flex; align-items: stretch; gap: 12px; }
#guide-glossary .gw-search{ flex: 1 1 auto; width: auto; min-width: 0; }
#guide-glossary .gw-openall{ flex: none; min-height: 0; padding: 0 20px; font-size: 15.5px; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
@media (max-width: 760px){ #guide-glossary .gw-tools{ flex-wrap: nowrap; } #guide-glossary .gw-search{ flex: 1 1 0; } #guide-glossary .gw-openall{ padding: 0 14px; font-size: 15px; } }

/* Figurenreihe am Handy: Hinweis zum Wischen, weicher rechter Rand mit Pfeil (Jan, 31.10.2026) */
.h2-swipe{ display: none; }
.h2-roster-scroll{ position: relative; }
@media (max-width: 760px){
  .h2-swipe{ display: block; margin: -10px 0 4px; font-size: 15px; font-weight: 700; color: var(--ink-soft); transition: opacity .3s; }
  .h2-swipe b{ display: inline-block; animation: h2-swipe 1.4s ease-in-out infinite; }
  .h2-swipe.is-done{ opacity: 0; }
  @keyframes h2-swipe{ 0%, 100%{ transform: translateX(0); } 50%{ transform: translateX(6px); } }
  .h2-roster-scroll::after{ content: "›"; position: absolute; top: 0; bottom: 16px; right: -16px; width: 56px; display: flex; align-items: center; justify-content: flex-end;
    padding-right: 8px; font: 900 34px/1 Inter, system-ui, sans-serif; color: var(--ink); pointer-events: none;
    background: linear-gradient(to right, rgba(78,205,196,0), rgba(78,205,196,.96) 60%); opacity: 0; transition: opacity .25s; }
  .h2-roster-scroll.can-scroll:not(.is-end)::after{ opacity: 1; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce){ .h2-swipe b{ animation: none; } }

/* Fortschritt am Kapitelende: Abstand zum letzten Kasten (seit die „Als Nächstes“-Karte weg ist, klebte er daran) */
.pr-end{ margin-top: 36px; }
.pr-end .pr-sum{ margin-bottom: 0; }
@media (max-width: 760px){ .pr-end{ margin-top: 28px; } }

/* Startseite: „Los geht’s!“ entfällt, die Bande folgt direkt darunter (Jan, 31.10.2026).
   Wer schon gelesen hat, sieht weiter „Weiter: Kapitel N“ und „Von vorn beginnen“. */
.hero2 .cv-actions .btn-cta:not(.is-continue){ display: none; }

/* Teil 32: Stimme der KI-Wolke – Knopf in der Antwort-Sprechblase */
.say-btn{ display: flex; width: fit-content; align-items: center; gap: 6px; margin: 4px 0 10px; padding: 4px 12px 4px 9px;
  border: 2px solid var(--ink); border-radius: 999px; background: #E8E1FF; color: var(--ink); box-shadow: 2px 2px 0 var(--ink);
  font: 800 14px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.say-btn:hover{ background: #D7CCFF; }
.say-btn.is-playing{ background: var(--gold); }
.say-btn:focus-visible{ outline: 3px solid var(--jet); outline-offset: 2px; }
.say-ico{ font-size: 15px; line-height: 1; }
@media (prefers-reduced-motion: no-preference){ .say-btn.is-playing .say-ico{ animation: say-pulse 1s ease-in-out infinite; } }
@keyframes say-pulse{ 50%{ transform: scale(1.18); } }
.say-btn[hidden]{ display: none; }
.ch-info .say-btn{ margin: -2px 0 2px; }

/* Pinnwand-Kasten und Elternhinweis: Abstand wie zwischen den anderen Karten (31.10.) */
.padlet-embed + .fact-banner{ margin-top: 32px; }
@media (max-width: 640px){ .padlet-embed + .fact-banner{ margin-top: 24px; } }

/* Zum Weiterlesen unter den Quellen; Vorlese-Knopf im Kasten „Auch KI macht Fehler!“ (31.10.) */
.sources-adults p.src-more{ margin-top: 12px; }

/* Kästen, die die Wolke vorliest (Teil 32, READ): sie sitzt am gerade gelesenen Punkt, der Punkt leuchtet (31.10.) */
.rd-box{ position: relative; }
.rd-box .say-rd{ margin: -4px 0 14px; }
.rd-cloud{ position: absolute; width: 186px; height: auto; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; z-index: 3;
  filter: drop-shadow(2px 3px 0 rgba(20,23,26,.25)); transition: top .45s cubic-bezier(.3,1.4,.5,1), left .45s cubic-bezier(.3,1.4,.5,1), opacity .25s, transform .25s; }
.rd-box.is-reading .rd-cloud{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mk-item, .learn-step{ transition: background-color .3s, transform .3s, box-shadow .3s; }
.mk-item.is-reading, .learn-step.is-reading{ background: #EFE8FF; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
@media (prefers-reduced-motion: no-preference){
  .rd-box.is-reading .rd-cloud{ animation: rd-bob 1.4s ease-in-out infinite; }
}
@keyframes rd-bob{ 0%,100%{ margin-top: 0; } 50%{ margin-top: -5px; } }
@media (prefers-reduced-motion: reduce){ .rd-cloud, .mk-item, .learn-step{ transition: none; } .mk-item.is-reading, .learn-step.is-reading{ transform: none; } }
@media (max-width: 640px){ .rd-cloud{ width: 130px; } }
/* Bunte Karten (Kap. 3): die gelesene Karte hebt sich, die anderen treten etwas zurück */
.rd-box.is-reading .concept-card{ transition: transform .3s, box-shadow .3s, opacity .3s; }
.rd-box.is-reading .concept-card.is-reading{ opacity: 1; transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.rd-box.rd-on-item .mk-item:not(.is-reading), .rd-box.rd-on-item .learn-step:not(.is-reading), .rd-box.rd-on-item .concept-card:not(.is-reading), .rd-box.rd-on-item .help-card:not(.is-reading){ opacity: .55; }
.mk-item, .learn-step{ transition: background-color .3s, transform .3s, box-shadow .3s, opacity .3s; }
@media (prefers-reduced-motion: reduce){ .rd-box .concept-card.is-reading{ transform: none; } }
/* Knopf über einem Kasten ohne eigene Überschrift (Kap. 9, 10) */
.say-rd + .concept-grid{ margin-top: 0; }
/* Kärtchen „So kann KI Kindern helfen“ (Kap. 5) */
.rd-box.is-reading .help-card{ transition: transform .3s, box-shadow .3s, opacity .3s, background-color .3s; }
.rd-box.is-reading .help-card.is-reading{ opacity: 1; background: #EFE8FF; transform: translate(-2px, -2px); }
@media (prefers-reduced-motion: reduce){ .rd-box.is-reading .help-card.is-reading{ transform: none; } }

/* Pinnwand-Bereich: Schritte, Pinnwand und Elternhinweis klar getrennt (die Kartenschatten schlucken sonst ~6 px) (31.10.) */
.gallery-steps + .padlet-embed, .padlet-embed + .fact-banner{ margin-top: 48px; }
@media (max-width: 640px){ .gallery-steps + .padlet-embed, .padlet-embed + .fact-banner{ margin-top: 36px; } }
/* Vorlese-Punkte allgemein (Absätze, Bilder, Ablauf, Tipps): Rahmen statt Farbe, damit es auf hellen und dunklen Kästen geht (31.10.) */
.rd-item{ transition: opacity .3s, outline-color .3s, background-color .3s, transform .3s, box-shadow .3s; }
.rd-box.rd-on-item .rd-item:not(.is-reading){ opacity: .55; }
p.rd-item.is-reading, .img-cap.rd-item.is-reading, li.rd-item.is-reading, .flow-step.rd-item.is-reading, .flow-caption.rd-item.is-reading{
  outline: 3px solid var(--teal); outline-offset: 6px; border-radius: 10px; }
.gallery-step.rd-item.is-reading{ background: #EFE8FF; }
.xp-letter[hidden]{ display: none; }
/* Pinnwand-Vorschau: Bild der Galerie über dem Knopf; Tippen öffnet die Pinnwand (31.10.) */
.padlet-preview{ display: block; width: 100%; padding: 0; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; background: #9FD356; cursor: pointer;
  position: relative; max-height: 340px; }
.padlet-preview img{ display: block; width: 100%; height: auto; }
.padlet-preview::after{ content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.85)); pointer-events: none; }
.padlet-preview:hover img{ transform: scale(1.02); }
.padlet-preview img{ transition: transform .3s; }
.padlet-preview:focus-visible{ outline: 3px solid var(--jet); outline-offset: 3px; }
@media (max-width: 640px){ .padlet-preview{ max-height: 220px; } .padlet-preview img{ width: 160%; max-width: none; } }
@media (prefers-reduced-motion: reduce){ .padlet-preview img{ transition: none; } .padlet-preview:hover img{ transform: none; } }

/* ===== Buch zum Herunterladen (31.10.2026) ===== */
.h2-badge a{ color: inherit; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.book-take{
  background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink);
  padding: 18px 20px 20px; margin: 0 0 24px; color: var(--ink); text-align: left;
}
.book-take h5{ font-family: "Fraunces", serif; font-weight: 800; font-size: 20px; margin: 0 0 6px; }
.book-take p{ margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.book-dl{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.book-dl-alt{ display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; }
/* Buch-Schild auf dem Umschlag: größer lesbar, Link bricht nicht in sich um (Jan, 31.10.) */
.h2-badge{ font-size: 17px; line-height: 1.45; padding: 7px 18px; }
.h2-badge a{ white-space: nowrap; }
@media (max-width: 760px){ .h2-badge{ font-size: 16px; padding: 7px 14px; } }