/* ============================================
   STARTSEITE (home-*)
   Tokens kommen aus style.css :root
   ============================================ */

/* ── Hero ───────────────────────────────────── */
.home-hero {
  background: var(--wash);
  text-align: center;
  padding-block: clamp(4rem, 3rem + 4vw, 7rem) var(--space-md);
}

/* Einmalige, gestaffelte Einblendung beim Laden: Pill, H1, Lead, Buttons, Prinzipien */
.home-hero .container > * {
  animation: home-hero-in var(--dur-gentle) var(--ease-out) both;
}
.home-hero .container > :nth-child(2) { animation-delay: 60ms; }
.home-hero .container > :nth-child(3) { animation-delay: 120ms; }
.home-hero .container > :nth-child(4) { animation-delay: 180ms; }
.home-hero .container > :nth-child(5) { animation-delay: 260ms; }

@keyframes home-hero-in {
  from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.home-hero__title {
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);
  max-width: 20ch;
  margin: var(--space-md) auto 0;
}

/* Ab 640px zusammenhalten, darunter darf der Titel umbrechen (390px ohne Überlauf) */
@media (min-width: 640px) {
  .home-hero__nowrap {
    white-space: nowrap;
  }
}

.home-hero__lead {
  max-width: 60ch;
  margin: var(--space-md) auto 0;
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-secondary);
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Prinzipien-Streifen */
.home-principles {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: var(--space-xl) 0 0;
  text-align: left;
}

.home-principle {
  background: var(--panel-cream);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg);
}

.home-principle__icon {
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 14px;
  color: var(--purple-600);
}

.home-principle__title {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.home-principle p:not(.home-principle__title) {
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (min-width: 860px) {
  .home-principles {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Kategorie-Blöcke ───────────────────────── */
.home-cat {
  padding-top: var(--space-xl);
}

.home-cat__title {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-cat__title-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--panel-violet);
  color: var(--purple-600);
}

.home-cat__title-icon svg {
  width: 22px;
  height: 22px;
}

.home-cat__intro {
  max-width: 70ch;
  margin-top: var(--space-sm);
  color: var(--text-secondary);
}

.home-cat__body {
  display: block;
  margin-top: var(--space-lg);
}

/* Mobile: volle Link-Liste mit Hairlines */
.home-cat__list {
  list-style: none;
  border-top: 1px solid var(--line);
}

.home-cat__list li {
  border-bottom: 1px solid var(--line);
}

.home-cat__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  min-height: 48px;
  padding: 10px 4px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--text-primary);
  text-decoration: none;
}

.home-cat__link:hover {
  color: var(--text-primary);
}

.home-cat__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--purple-600);
}

.home-cat__label {
  flex: 1 1 auto;
}

.home-cat__hint {
  flex-basis: 100%;
  padding-left: 32px;
  padding-bottom: 4px;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-secondary);
}

.home-cat__link:focus-visible {
  outline: 3px solid var(--purple-400);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Mobile: Panels ausblenden (Liste ist die Navigation) */
.home-cat__panel,
.home-cat__panel[hidden] {
  display: none;
}

/* ── Ab 860px: Liste links, Panel rechts ───── */
@media (min-width: 860px) {
  .home-cat__body {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: var(--space-lg);
    align-items: start;
  }

  .home-cat__list {
    border-top: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .home-cat__list li {
    border-bottom: 0;
  }

  .home-cat__link {
    flex-wrap: nowrap;
    padding: 10px 14px;
    border-radius: 12px;
    transition:
      background-color var(--dur-hover) ease,
      color var(--dur-hover) ease;
  }

  .home-cat__link .home-cat__icon {
    transition: color var(--dur-hover) ease;
  }

  .home-cat__hint {
    display: none;
  }

  .home-cat__link.is-active {
    background: var(--purple-600);
    color: #FFFFFF;
  }

  .home-cat__link.is-active .home-cat__icon {
    color: #FFFFFF;
  }

  @media (hover: hover) {
    .home-cat__link:not(.is-active):hover {
      background: var(--panel-violet);
      color: var(--text-primary);
    }
  }

  .home-cat__link.is-active:focus-visible,
  .home-cat__link:focus-visible {
    outline: 3px solid var(--purple-400);
    outline-offset: 2px;
  }

  .home-cat__panel,
  .home-cat__panel[hidden] {
    display: flex;
  }

  .home-cat__panel[hidden] {
    display: none;
  }

  .home-cat__panel {
    flex-direction: column;
    min-height: 300px;
    padding: 32px;
    background: var(--panel-cream);
    border-radius: var(--radius-panel);
  }

  /* Panel-Wechsel: Transition statt Keyframes (schnell hintereinander auslösbar) */
  .home-cat__panel {
    transition:
      opacity 240ms var(--ease-out),
      transform 240ms var(--ease-out);
  }

  @starting-style {
    .home-cat__panel.is-shown {
      opacity: 0;
      transform: translateY(6px);
    }
  }
}

.home-cat__panel h3 {
  margin-bottom: 12px;
}

.home-cat__panel-text {
  max-width: 60ch;
  color: var(--text-secondary);
}

.home-cat__points-label {
  margin-top: var(--space-md);
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--text-primary);
}

.home-cat__points {
  list-style: none;
  margin-top: 10px;
  display: grid;
  gap: 8px;
  color: var(--text-secondary);
}

.home-cat__points li {
  position: relative;
  padding-left: 18px;
}

.home-cat__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple-400);
}

.home-cat__cta {
  align-self: flex-start;
  margin-top: auto;
  padding-top: var(--space-md);
  font-weight: 600;
  color: var(--purple-700);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.home-cat__cta:hover {
  color: var(--purple-600);
}

.home-cat__cta:focus-visible {
  outline: 3px solid var(--purple-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Illustrationen in den Kategorie-Panels ── */
.home-cat__text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.home-cat__bild {
  display: block;
  width: 100%;
  height: auto;
}

/* 860 bis 1023px: Bild über dem Text */
@media (min-width: 860px) and (max-width: 1023.98px) {
  .home-cat__bild {
    order: -1;
    max-width: 280px;
    margin-bottom: var(--space-sm);
  }
}

/* Ab 1024px: Text links, Bild rechts, vertikal zentriert */
@media (min-width: 1024px) {
  .home-cat__panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 38%);
    align-items: center;
    column-gap: var(--space-lg);
  }

  .home-cat__panel[hidden] {
    display: none;
  }

  .home-cat__text {
    align-self: stretch;
  }
}

/* ── Beliebte HTML-Editoren ─────────────────── */
.home-editors {
  padding-block: var(--space-xl) var(--space-2xl);
}

.home-editors__intro {
  max-width: 70ch;
  margin-top: var(--space-sm);
  color: var(--text-secondary);
}

.home-editors__grid {
  list-style: none;
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.home-editors__card {
  display: flex;
  gap: var(--space-md);
  height: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-md) var(--space-lg);
}

.home-editors__rank {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--panel-violet);
  color: var(--purple-700);
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.home-editors__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.home-editors__name {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.home-editors__badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--panel-violet);
  color: var(--purple-700);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
}

.home-editors__desc {
  margin-top: 8px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--text-secondary);
}

.home-editors__action {
  margin-top: var(--space-lg);
}

@media (min-width: 700px) {
  .home-editors__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-editors__card:last-child {
    grid-column: 1 / -1;
  }
}

@media (min-width: 960px) {
  .home-editors__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-editors__card:last-child {
    grid-column: auto;
  }
}

/* ── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Weniger, nicht null: nur Überblendung, keine Bewegung, keine Unschärfe */
  .home-hero .container > * {
    animation-name: home-hero-fade;
    animation-duration: 400ms;
  }
  @keyframes home-hero-fade { from { opacity: 0; } to { opacity: 1; } }

  .home-cat__panel {
    transition: opacity 200ms ease;
  }
  @starting-style {
    .home-cat__panel.is-shown { transform: none; }
  }

  .home-cat__link,
  .home-cat__link .home-cat__icon {
    transition: none;
  }
}