/* 
  THEME: CITIES OF PEACE (COP)
  Projekt-spezifische Farben und Fonts
*/

:root {
  /* ========================================
     COP COLORS
     ======================================== */
  --primary-color: #10a9e0;         /* Helles Türkis/Cyan */
  --secondary-color: #4a7ba7;       /* Mittel-Blau */
  --accent-color: #f0f8ff;          /* Helles Blau */
  --accent-light: #d4e4f0;          /* Sehr helles Blau */
  --accent-dark: #2c5f7f;           /* Dunkles Blau */
  --accent-green: #23a611;          /* Grün */

  /* Text Colors */
  --text-color: #444;
  --text-color-light: #ffffff;
  --text-color-muted: rgba(255, 255, 255, 0.7);
  --text-color-secondary: #666;
  
  /* Background Colors */
  --background-white: #fff;
  --background-light: #f5f5f5;
  --background-blue: #f0f8ff;       /* Alice Blue */
  --background-shadow-light: rgba(16, 169, 224, 0.05);
  
  /* ========================================
     COP FONTS
     ======================================== */
  --font-primary: 'Montserrat', Arial, sans-serif;
  --font-display: 'Montserrat', Arial, sans-serif;
}

/* ========================================
   FONT-FACE DEFINITIONS
   ======================================== */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
body, button, input, textarea, select, table {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  font-weight: 400;
  color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--primary-color);
  display: block;
  clear: both;
}

h1 {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--spacing-md);
  padding: 0;
}

h2 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
  margin: var(--spacing-md) 0 3rem;
  padding: 0;
}

h3 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-normal);
  margin: var(--spacing-md) 0;
  padding: 0;
}

h4 {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-normal);
  margin: var(--spacing-md) 0;
  padding: 0;
}

h5 {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-normal);
  margin: var(--spacing-md) 0;
  padding: 0;
  font-weight: 700;
}

h6 {
  padding: 0.9375rem var(--spacing-md);
  margin: 0 0 var(--spacing-sm) 15%;
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  font-weight: 600;
  width: max-content;
  background: var(--secondary-color);
  color: var(--text-color-light);
}

p {
  padding: 0;
  margin: 0 0 var(--spacing-md);
  display: block;
}

ul, ol {
  margin-bottom: var(--spacing-md);
}

li {
  margin-bottom: var(--spacing-xs);
}

strong {
  font-weight: 600;
}

.minitext {
  font-size: 75%;
  margin-bottom: 0;
}

/* Peace Quote Styling (similar to LBA's "lichtweisheit") */
/* delete ? */
.peace-quote {
  font-family: var(--font-display);
  font-size: 1.625rem;
  line-height: var(--line-height-relaxed);
  font-weight: 500;
  font-style: normal;
  color: var(--secondary-color);
}



/* ========================================
   THEME VARIANTS
   ======================================== */
.theme--peace {
  background: var(--background-blue);
  box-shadow: 0 0 var(--spacing-sm) var(--background-shadow-light) inset;
}

.theme--harmony {
  color: var(--text-color-light);
  background: var(--secondary-color);
}

.theme--nature {
  color: var(--text-color-light);
  background: #3b8034cc;
}

.theme--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%);
}

.theme--contact {
  background: rgba(16, 169, 224, 0.15);
}

.theme--footer {
  background: var(--secondary-color);
  color: var(--text-color-light);
}

.theme--harmony h3,
.theme--nature h3,
.theme--sky h3,
.theme--footer h2,
.theme--footer h3,
.theme--footer h5 {
  color: var(--text-color-light);
}

.theme--footer a {
  color: var(--text-color-muted);
  text-decoration: none;
}

.theme--footer a:hover {
  color: var(--text-color-light);
}

/* COP Alpha-Variationen */
.cop11 { background: rgba(16, 169, 224, 0.07); }
.cop22 { background: rgba(16, 169, 224, 0.13); }
.cop33 { background: rgba(16, 169, 224, 0.2); }
.cop66 { background: rgba(16, 169, 224, 0.4); color: var(--text-color); }
.cop77 { background: rgba(16, 169, 224, 0.47); color: var(--text-color-light); }
.cop88 { background: rgba(16, 169, 224, 0.53); color: var(--text-color-light); }
.copaa { background: rgba(16, 169, 224, 0.67); color: var(--text-color-light); }
.copbb { background: rgba(16, 169, 224, 0.73); color: var(--text-color-light); }
.copcc { background: rgba(16, 169, 224, 0.8); color: var(--text-color-light); }

.cop77 a, .cop88 a, .copaa a, .copbb a, .copcc a,
.cop77 h2, .cop88 h2, .copaa h2, .copbb h2, .copcc h2,
.cop77 h3, .cop88 h3, .copaa h3, .copbb h3, .copcc h3,
.cop77 h4, .cop88 h4, .copaa h4, .copbb h4, .copcc h4 {
  color: var(--text-color-light);
}

/* ========================================
   BUTTONS
   ======================================== */
.button-primary {
  padding: 0.625rem 1.625rem;
  margin: var(--spacing-md) auto 0;
  width: max-content;
  max-width: 90%;
  display: block;
  box-sizing: border-box;
  background: var(--primary-color);
  color: var(--text-color-light);
  transition: padding var(--transition-base), background var(--transition-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  text-align: center;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  border: none;
  cursor: pointer;
}

.button-primary:hover {
  padding: 0.625rem var(--spacing-md);
  background: var(--secondary-color);
}

.button-secondary {
  padding: 0.625rem 1.625rem;
  margin: var(--spacing-md) auto 0;
  width: max-content;
  max-width: 90%;
  display: block;
  box-sizing: border-box;
  background: var(--secondary-color);
  color: var(--text-color-light);
  transition: padding var(--transition-base), background var(--transition-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  text-align: center;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  border: none;
  cursor: pointer;
}

.button-secondary:hover {
  padding: 0.625rem var(--spacing-md);
  background: var(--accent-dark);
}

.button-light {
  padding: 0.625rem 1.625rem;
  margin: var(--spacing-md) auto 0;
  width: max-content;
  max-width: 90%;
  display: block;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
  transition: padding var(--transition-base), background var(--transition-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  text-align: center;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: break-word;
  border: none;
  cursor: pointer;
}

.button-light:hover {
  padding: 0.625rem var(--spacing-md);
  background: #ffffff;
}

/* Backward compatibility with old LBA class names */
.weiterbutton {
  padding: 0.625rem 1.625rem;
  margin: var(--spacing-md) auto 0;
  width: max-content;
  max-width: 90%;
  display: block;
  background: var(--primary-color);
  color: var(--text-color-light);
  transition: padding var(--transition-base), background var(--transition-base);
  border-radius: var(--radius-sm);
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.weiterbutton:hover {
  padding: 0.625rem var(--spacing-md);
  background: var(--secondary-color);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 900px) {
  h1, h2 {
    font-size: var(--font-size-2xl);
    line-height: 2.5rem;
  }
  
  h3 {
    font-size: var(--font-size-xl);
    line-height: 2.25rem;
  }
  
  h4 {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
  }
}

@media (max-width: 800px) {
  .peace-quote {
    font-size: 1.25rem;
    line-height: var(--line-height-loose);
  }
}

@media (max-width: 560px) {
  .button-primary, .button-secondary, .button-light, .weiterbutton {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    max-width: 95%;
    line-height: 1.4;
  }
  
  .button-primary:hover, .button-secondary:hover, .button-light:hover, .weiterbutton:hover {
    padding: 0.5rem 1.25rem;
  }
}