/*
  CODE24 – About & History Styles
  Mobile‑first, Tailwind utility classes via @apply comments (for reference).
  Copy this file to /public/css/about.css
*/

/* ─── Generic container ─── */
.container{max-width:1300px;margin-left:auto;margin-right:auto}

/* ───────── Tabs (/about) ───────── */
.tab-list{display:flex;border-bottom:1px solid #e5e7eb;margin-bottom:1.5rem}
.tab-btn{appearance:none;background:none;border:none;outline:none;margin-right:1rem;padding:0.5rem 0;font-size:0.9rem;font-weight:600;color:#4b5563;border-bottom:2px solid transparent;cursor:pointer;transition:color .2s,border-color .2s}
.tab-btn:hover{color:#2563eb}
.tab-btn.active{color:#2563eb;border-color:#2563eb}
.tab-btn:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
.tab-panel{display:none}
.tab-panel.active{display:block}
.tab-panel ul,
.tab-panel ol{
  padding-left:1.25rem;      /* gleicht Bullet-Einzug an */
  list-style-position:inside;/* Bullet ragt nicht mehr links heraus */
}.fade-in{animation:fadeIn .25s ease-in}

/* ───────── Timeline (/about/history) ───────── */
.vis-item .vis-item-content{font-size:0.65rem!important;line-height:0.9rem!important}

/* Detail‑Table */
#history-wrapper{max-height:20rem;overflow-y:auto;scrollbar-width:thin}
.history-table{width:100%;border-collapse:separate;border-spacing:0 0.5rem;font-size:0.9rem}
.history-table td{padding:0.6rem 0.5rem;vertical-align:top}
@media(min-width:768px){.history-table td{padding:0.6rem 1rem}}
.history-row{transition:opacity .3s ease}
.history-row.inactive{opacity:0.35}
.history-row.active{opacity:1}
.history-row:hover{opacity:0.8}
.history-year{min-width:3.5rem;font-family:monospace;color:#6b7280;font-weight:600}
.history-body h2{font-weight:600;margin-bottom:0.25rem;font-size:1rem}
@media(min-width:768px){.history-body h2{font-size:1.125rem}}
.source-link{color:#2563eb;text-decoration:underline;display:inline-flex;align-items:center;gap:0.25rem}
.source-link:hover{color:#1d4ed8}
.source-link svg{width:0.85rem;height:0.85rem;transform:translateY(-1px)}

@media(max-width:639px){
  .history-table td{display:block;width:100%!important;padding:0.3rem 0}
  .history-year{font-size:0.8rem;margin-bottom:0.15rem}
  .history-source{text-align:left;padding-top:0.25rem}
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}