/* checkliste-tabs.css – Tab-Widget für die Checkliste auf der Startseite (Vorschlag 4).
   Nutzt bewusst nur die bestehenden CSS-Variablen aus layout-navigation.css. */

.cl-section{
  max-width: 1180px;
  margin: 8px auto 0;
}
.cl-h2{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
}
.cl-section .ln-note{
  margin: 0 0 20px;
}

.cl-toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.cl-tabs{
  display: flex;
  gap: 4px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 4px;
}
.cl-tab{
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-soft);
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
}
.cl-tab:hover{ color: var(--text); }
.cl-tab[aria-selected="true"]{
  background: var(--accent);
  color: #fff;
}
.cl-tab:focus-visible{ outline: 2px solid var(--accent-dark); outline-offset: 2px; }

.cl-print-btn{
  display: flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-dark);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 14px;
  cursor: pointer;
}
.cl-print-btn:hover{ background: var(--bg); }

.cl-panel[hidden]{ display: none; }

.cl-grid{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 16px;
}

.cl-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text);
}
.cl-num{
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eaf0fb;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.cl-item-new .cl-num{
  background: var(--accent);
  color: #fff;
}

@media (max-width: 720px){
  .cl-grid{ grid-template-columns: 1fr; padding: 18px 18px; }
  .cl-toolbar{ flex-direction: column; align-items: stretch; }
  .cl-tabs{ justify-content: space-between; }
  .cl-tab{ flex: 1; text-align: center; padding: 9px 8px; }
}

/* Druckansicht: alle drei Themen untereinander statt nur des aktiven Tabs,
   Navigations-Elemente werden ausgeblendet. */
@media print{
  #ln-header, #ln-sidebar, #ln-footer, #ln-cookie-banner,
  .ln-hero, .ln-trust, .ln-journey, .ln-breadcrumbs,
  .cl-tabs, .cl-print-btn{ display: none !important; }
  .cl-panel{ display: block !important; page-break-inside: avoid; margin-bottom: 18px; }
  .cl-panel::before{
    content: attr(data-print-title);
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: #000;
    margin: 0 0 10px;
  }
  .cl-grid{ grid-template-columns: 1fr; border: none; padding: 0; }
}