/* ==========================================================================
   Red Block
   Phase 7C-C — extracted from inline styles in
   ContentBlocks/ContentElements/red-block/templates/frontend.html
   ========================================================================== */

.red-block {
  background: var(--accent);
  color: #fff;
}

.redblock {
  padding: 40px 32px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
}

.redblock .icn {
  width: 72px;
  height: 72px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.redblock__headline {
  font-size: 48px;
  margin: 0;
}

.redblock__text {
  margin: 10px 0 0;
  font-size: 16px;
  max-width: 720px;
  opacity: .95;
}

/* ----- Tablet (migrated from main.css) -----
   Phase 7D Mobile-First-Refactor: !important entfernt (Spezifität reicht). */
@media (max-width: 960px) {
  .redblock {
    grid-template-columns: 1fr;
    gap: 20px;
    text-align: left;
  }
  .redblock h2 { font-size: 36px; }
  .redblock .icn { display: none; }
}

/* ----- Phone (migrated from main.css) ----- */
@media (max-width: 600px) {
  .redblock { padding: 28px 16px; }
  .redblock h2 { font-size: 30px; }
  .redblock p { font-size: 14px; }
  .redblock .btn { width: 100%; justify-content: center; }
}