/*
  FRAME BACKGROUNDS - Hintergrundfarben für Container
  Verwendet Design Tokens und Theme-Variablen
*/

/* ========================================
   BACKGROUND COLORS
   ======================================== */

/* Transparent / Kein Hintergrund */
.frame-bg-none {
  background: transparent;
}

/* Peace Theme - Hellblau */
.frame-bg-peace {
  background: var(--background-blue);
  box-shadow: 0 0 var(--spacing-sm) var(--background-shadow-light) inset;
}

/* Harmony Theme - Mittel-Blau */
.frame-bg-harmony {
  background: var(--secondary-color);
  color: var(--text-color-light);
}

.frame-bg-harmony h1,
.frame-bg-harmony h2,
.frame-bg-harmony h3,
.frame-bg-harmony h4,
.frame-bg-harmony h5,
.frame-bg-harmony h6 {
  color: var(--text-color-light);
}

/* Nature Theme - Grün */
.frame-bg-nature {
  background: #3b8034cc;
  color: var(--text-color-light);
}

.frame-bg-nature h1,
.frame-bg-nature h2,
.frame-bg-nature h3,
.frame-bg-nature h4,
.frame-bg-nature h5,
.frame-bg-nature h6 {
  color: var(--text-color-light);
}

/* Sky Theme - Gradient */
.frame-bg-sky {
  color: var(--text-color-light);
  background-size: 100% 100%;
  background-color: var(--accent-color);
  background-image:
    radial-gradient(70% 53% at 36% 76%, rgba(16, 169, 224, 0.4) 0%, transparent 100%),
    radial-gradient(42% 53% at 34% 72%, rgba(255, 255, 255, 0.3) 3%, transparent 100%),
    radial-gradient(31% 43% at 7% 98%, rgba(255, 255, 255, 0.5) 5%, transparent 100%),
    radial-gradient(150% 150% at 100% 0%, rgba(168, 199, 217, 0.9) 1%, transparent 100%),
    linear-gradient(125deg, #10a9e0 1%, #4a7ba7 100%);
}

.frame-bg-sky h1,
.frame-bg-sky h2,
.frame-bg-sky h3,
.frame-bg-sky h4,
.frame-bg-sky h5,
.frame-bg-sky h6 {
  color: var(--text-color-light);
}

/* Contact Theme - Hellblau transparent */
.frame-bg-contact {
  background: rgba(16, 169, 224, 0.15);
}

/* Weiß */
.frame-bg-white {
  background: var(--background-white);
}

/* Hellgrau */
.frame-bg-light {
  background: var(--background-light);
}

/* ========================================
   COP FARBEN FÜR CONTAINERITEMS SECTION
   Klassen werden direkt auf <section class="c-section cop-*"> gesetzt
   ======================================== */

/* Peace - Hellblau */
.c-section.cop-peace {
  background: var(--background-blue);
  box-shadow: 0 0 var(--spacing-sm) var(--background-shadow-light) inset;
}

/* Harmony - Mittel-Blau */
.c-section.cop-harmony {
  background: var(--secondary-color);
  color: var(--text-color-light);
}
.c-section.cop-harmony h1,
.c-section.cop-harmony h2,
.c-section.cop-harmony h3,
.c-section.cop-harmony h4,
.c-section.cop-harmony h5,
.c-section.cop-harmony h6 {
  color: var(--text-color-light);
}

/* Nature - Grün */
.c-section.cop-nature {
  background: #3b8034cc;
  color: var(--text-color-light);
}
.c-section.cop-nature h1,
.c-section.cop-nature h2,
.c-section.cop-nature h3,
.c-section.cop-nature h4,
.c-section.cop-nature h5,
.c-section.cop-nature h6 {
  color: var(--text-color-light);
}

/* Sky - Gradient */
.c-section.cop-sky {
  color: var(--text-color-light);
  background-size: 100% 100%;
  background-color: var(--accent-color);
  background-image:
    radial-gradient(70% 53% at 36% 76%, rgba(16, 169, 224, 0.4) 0%, transparent 100%),
    radial-gradient(42% 53% at 34% 72%, rgba(255, 255, 255, 0.3) 3%, transparent 100%),
    radial-gradient(31% 43% at 7% 98%, rgba(255, 255, 255, 0.5) 5%, transparent 100%),
    radial-gradient(150% 150% at 100% 0%, rgba(168, 199, 217, 0.9) 1%, transparent 100%),
    linear-gradient(125deg, #10a9e0 1%, #4a7ba7 100%);
}
.c-section.cop-sky h1,
.c-section.cop-sky h2,
.c-section.cop-sky h3,
.c-section.cop-sky h4,
.c-section.cop-sky h5,
.c-section.cop-sky h6 {
  color: var(--text-color-light);
}

/* Contact - Hellblau transparent */
.c-section.cop-contact {
  background: rgba(16, 169, 224, 0.15);
}

/* Weiß */
.c-section.cop-white {
  background: var(--background-white);
}

/* Hellgrau */
.c-section.cop-light {
  background: var(--background-light);
}

/* ========================================
   CONTAINER PADDING
   ======================================== */

/* Hintergrund-Container brauchen Padding */
.frame-bg-peace,
.frame-bg-harmony,
.frame-bg-nature,
.frame-bg-sky,
.frame-bg-contact,
.frame-bg-white,
.frame-bg-light {
  padding: var(--spacing-lg) 0;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 900px) {
  .frame-bg-peace,
  .frame-bg-harmony,
  .frame-bg-nature,
  .frame-bg-sky,
  .frame-bg-contact,
  .frame-bg-white,
  .frame-bg-light {
    padding: var(--spacing-md) 0;
  }
}