/* ==========================================================================
   RAUMGESTALTUNG-ONLINE.CSS — Page-specific styles
   ========================================================================== */

/* --- Google Fonts import --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:wght@600;700;800&display=swap');

/* --- Hero --- */
.hero {
  position: relative;
  padding: var(--space-3xl) 0 var(--space-2xl);
  background: linear-gradient(165deg, var(--color-bg) 0%, var(--color-primary-light) 50%, #eef9f5 100%);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(26,107,90,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero .container {
  max-width: var(--max-width-wide);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.hero-content { position: relative; z-index: 1; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.3rem 0.9rem;
  background: var(--color-accent-light);
  color: var(--color-accent);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: var(--space-lg);
  border: 1px solid rgba(212,168,83,0.3);
}
.hero h1 { margin-bottom: var(--space-md); }
.hero h1 em {
  font-style: normal;
  color: var(--color-primary);
  position: relative;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 6px;
  background: rgba(26,107,90,0.15);
  border-radius: 3px;
}
.hero-subtitle {
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  max-width: 480px;
  line-height: 1.6;
}
.hero-cta-group {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.hero-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-image .placeholder-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #e8f4f0 0%, #d4e8e2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  font-size: 0.85rem;
  color: var(--color-text-light);
  text-align: center;
  font-style: italic;
}

@media (max-width: 768px) {
  .hero { padding: var(--space-2xl) 0; }
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-cta-group { justify-content: center; }
  .hero-image { max-width: 400px; margin: 0 auto; }
}

/* --- Stats Bar --- */
.stats-bar {
  padding: var(--space-xl) 0;
  background: var(--color-bg-dark);
  color: #fff;
}
.stats-bar .container {
  max-width: var(--max-width-wide);
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
  flex-wrap: wrap;
}
.stat-item {
  text-align: center;
  min-width: 140px;
}
.stat-number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-xs);
}
.stat-label {
  font-size: 0.85rem;
  color: #9a9aad;
  font-weight: 500;
}

/* --- Intro / Definition --- */
.intro {
  padding: var(--space-3xl) 0;
}
.intro .container { max-width: var(--max-width); }
.intro h2 { margin-bottom: var(--space-lg); }
.intro-lead {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-xl);
  border-left: 3px solid var(--color-primary);
  padding-left: var(--space-lg);
}
.room-types-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.room-type-chip {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.6rem 0.9rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  transition: border-color 0.2s, background 0.2s;
}
.room-type-chip:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.room-type-chip .icon {
  color: var(--color-primary);
  width: 1.3em;
  height: 1.3em;
}

/* --- Testsieger / Featured Tool --- */
.testsieger {
  padding: var(--space-3xl) 0;
  background: var(--color-primary-light);
}
.testsieger .container {
  max-width: var(--max-width-wide);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}
.testsieger-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.4rem 1rem;
  background: var(--color-accent);
  color: var(--color-text);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-lg);
}
.testsieger h2 { margin-bottom: var(--space-md); }
.testsieger-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm) var(--space-lg);
  margin: var(--space-lg) 0 var(--space-xl);
}
.testsieger-feature {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}
.testsieger-feature .icon {
  color: var(--color-success);
  flex-shrink: 0;
}
.testsieger-image .placeholder-img {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #d4e8e2 0%, #b8d8ce 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  font-size: 0.85rem;
  color: var(--color-text-light);
  text-align: center;
  font-style: italic;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 768px) {
  .testsieger .container { grid-template-columns: 1fr; }
  .testsieger-features { grid-template-columns: 1fr; }
}

/* --- Comparison Table --- */
.comparison-table {
  padding: var(--space-3xl) 0;
}
.comparison-table .container { max-width: var(--max-width-wide); }
.comparison-table h2 { margin-bottom: var(--space-xl); text-align: center; }

.comparison-table .table-wrap { margin-top: var(--space-lg); }
.comparison-table td:first-child { font-weight: 600; white-space: nowrap; }
.comparison-table .row-highlight {
  background: var(--color-primary-light) !important;
  border-left: 3px solid var(--color-primary);
}
.comparison-table .badge-winner {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.5rem;
  background: var(--color-accent);
  color: var(--color-text);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: var(--space-sm);
  white-space: nowrap;
}
.icon-check-cell { color: var(--color-success); }
.icon-cross-cell { color: var(--color-danger); }
.icon-partial-cell { color: var(--color-warning); }

/* --- Tool Cards Grid --- */
.tool-reviews {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-alt);
}
.tool-reviews .container { max-width: var(--max-width-wide); }
.tool-reviews h2 { margin-bottom: var(--space-xl); text-align: center; }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}
.tool-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tool-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}
.tool-card--featured {
  border-color: var(--color-primary);
  border-width: 2px;
  position: relative;
}
.tool-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.tool-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}
.tool-card h3 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
}
.tool-card-type {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.tool-card-desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}
.tool-card-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}
.tool-card-feature {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.tool-card-feature .icon { width: 1em; height: 1em; color: var(--color-success); }
.tool-card-pricing {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}
.tool-card-verdict {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* --- Buyer's Guide --- */
.buyers-guide {
  padding: var(--space-3xl) 0;
}
.buyers-guide .container { max-width: var(--max-width); }
.buyers-guide h2 { margin-bottom: var(--space-xl); }
.guide-criteria {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.criterion {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}
.criterion-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.criterion h3 { margin-bottom: var(--space-xs); font-family: var(--font-body); }
.criterion p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

/* --- CTA Banner --- */
.cta-banner {
  padding: var(--space-3xl) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
}
.cta-banner h2 {
  color: #fff;
  margin-bottom: var(--space-md);
}
.cta-banner p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-xl);
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.cta-banner .btn--accent {
  font-size: 1.1rem;
  padding: 1rem 2.5rem;
}

/* --- Room Types Use Cases --- */
.room-types {
  padding: var(--space-3xl) 0;
  background: var(--color-bg-alt);
}
.room-types .container { max-width: var(--max-width-wide); }
.room-types h2 { text-align: center; margin-bottom: var(--space-xl); }

.rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-lg);
}
.room-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.room-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-3px);
}
.room-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-md);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.room-card h3 {
  font-family: var(--font-body);
  font-size: 1rem;
  margin-bottom: var(--space-sm);
}
.room-card p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* --- FAQ --- */
.faq {
  padding: var(--space-3xl) 0;
}
.faq .container { max-width: var(--max-width); }
.faq h2 { text-align: center; margin-bottom: var(--space-xl); }
.faq-list {
  border-top: 1px solid var(--color-border);
}

/* --- Final CTA --- */
.cta-final {
  padding: var(--space-2xl) 0 var(--space-3xl);
  text-align: center;
}
.cta-final .container { max-width: var(--max-width); }
.cta-final-box {
  padding: var(--space-2xl);
  background: var(--color-bg-alt);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.cta-final-box h2 { margin-bottom: var(--space-md); }
.cta-final-box p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .stats-bar .container { gap: var(--space-lg); }
  .stat-number { font-size: 1.8rem; }
  .rooms-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .tools-grid { grid-template-columns: 1fr; }
  .criterion { flex-direction: column; gap: var(--space-md); }
}