/*
Theme Name: GeneratePress Child
Description: Child theme for GeneratePress by Kernfunke
Author: Kernfunke
Author URI: https://kernfunke.com
Template: generatepress
Version: 1.0.0
*/

/* =====================================
   CUSTOM THEME by KERNFUNKE – DARK MODE
   ===================================== */

   :root {
    /* Layout */
    --container-width: 1640px;
    --section-spacing: 80px; /* Mobile first */
  
    /* Primärfarben */
    --kf-primary-color-1: #ffffff; /* Primary text color */
    --kf-primary-color-2: #FFB100; /* Link color & CTA hover */
    --kf-primary-color-3: #000000; /* Background color (Dark Mode) */
    --kf-primary-color-4: #2b2b2b;
  
    /* Primärfarben-Ergänzung */
    --kf-primary-color-1-1: #f5f5f5;
    --kf-primary-color-1-2: #dddddd;
  
    --kf-primary-color-2-1: #FFB100; /* Link hover color */
    --kf-primary-color-2-2: #e6a600;
  
    --kf-primary-color-3-1: #1a1a1a;
    --kf-primary-color-3-2: #2e2e2e;
  
    --kf-primary-color-4-1: #3d3d3d;
    --kf-primary-color-4-2: #1a1a1a;
  
    /* Sekundärfarben */
    --kf-secondary-color-1: #5695ba;
    --kf-secondary-color-1-1: #8cbad4;
    --kf-secondary-color-1-2: #3b799f;
  
    --kf-secondary-color-2: #571010; /* CTA button color */
    --kf-secondary-color-2-1: #FFB100; /* CTA button hover color */
    --kf-secondary-color-2-2: #330606; /* Divider / border color */
  
    --kf-secondary-color-3: #3b6c04;
    --kf-secondary-color-3-1: #4b8f00;
    --kf-secondary-color-3-2: #345e09;
  
    --kf-secondary-color-4: #ffec14;
    --kf-secondary-color-4-1: #ffe043;
    --kf-secondary-color-4-2: #efb203;
  
    /* Grenz- und Verläufe */
    --kf-border-color: #330606; /* Divider / border color */
    --gradient-wappen: linear-gradient(180deg, #571010 0%, #FFB100 100%); /* Wappen gradient */
  
    /* Shades */
    --kf-shade-1-1: #d0d7dd;
    --kf-shade-1-2: #a4b2be;
    --kf-shade-1-3: #8094a4;
    --kf-shade-1-4: #7893a5;
    --kf-shade-1-5: #1f5671;
    --kf-shade-1-6: #002c43;
  
    --kf-shade-2-1: #f6f6f6;
    --kf-shade-2-2: #e7e7e7;
    --kf-shade-2-3: #c3c3c3;
    --kf-shade-2-4: #666666;
    --kf-shade-2-5: #4f4f4f;
    --kf-shade-2-6: #2b2b2b;
  
    --kf-shade-3-1: #ffffff;
  
    /* Typografie - Mobile First */
    --font-family: 'Montserrat', sans-serif;
    --font-size-body: 1.875rem; /* 30px - vorheriger Wert: 16px (1rem) */
    --font-size-h1: 2.5rem; /* 40px - responsiv statt 70px */
    --font-size-h2: 4.375rem; /* 70px - vorheriger Wert: 32px (2rem) */
    --font-size-h3: 2.5rem; /* 40px - vorheriger Wert: 18px (1.125rem) */
    --font-size-h4: 1rem; /* 16px */
    --font-size-h5: 0.875rem; /* 14px */
    --font-size-h6: 0.75rem; /* 12px */
    --font-size-button: 1.125rem; /* 18px - wie Designerin */
    --font-size-quote: 1.875rem; /* 30px - wie Designerin */
    --line-height-body: 1.5; /* 45px - vorheriger Wert: 2.8125 */
    --line-height-headings: 1.214; /* 85px/70px für H2 - vorheriger Wert: 1.2 */
    --line-height-h3: 1.125; /* 45px/40px für H3 */
    
    /* Spacing System - 8px Grid */
    --space-xs: 0.25rem; /* 4px */
    --space-sm: 0.5rem; /* 8px */
    --space-md: 1rem; /* 16px */
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-2xl: 3rem; /* 48px */
    --space-3xl: 4rem; /* 64px */
    --space-4xl: 5rem; /* 80px */
  }
  
  /* Tablet Breakpoint */
  @media (min-width: 768px) {
    :root {
      --section-spacing: 100px;
      --font-size-body: 1.875rem; /* 30px - vorheriger Wert: 18px (1.125rem) */
      --font-size-h1: 3.5rem; /* 56px */
      --font-size-h2: 4.375rem; /* 70px - vorheriger Wert: 40px (2.5rem) */
      --font-size-h3: 2.5rem; /* 40px - vorheriger Wert: 18px (1.125rem) */
      --font-size-h4: 1.25rem; /* 20px */
      --font-size-h5: 1rem; /* 16px */
      --font-size-h6: 0.875rem; /* 14px */
      --font-size-quote: 1.875rem; /* 30px - bleibt wie Designerin */
      --line-height-body: 1.5; /* Konsistenter Zeilenabstand */
    }
  }
  
  /* Desktop Breakpoint */
  @media (min-width: 1200px) {
    :root {
      --section-spacing: 140px;
      --font-size-body: 1.875rem; /* 30px - vorheriger Wert: 20px (1.25rem) */
      --font-size-h1: 4.375rem; /* 70px - wie Designerin */
      --font-size-h2: 4.375rem; /* 70px - vorheriger Wert: 45px (2.8125rem) */
      --font-size-h3: 2.5rem; /* 40px - vorheriger Wert: 18px (1.125rem) */
      --font-size-h4: 1.5rem; /* 24px */
      --font-size-h5: 1.125rem; /* 18px */
      --font-size-h6: 1rem; /* 16px */
      --font-size-quote: 1.875rem; /* 30px - bleibt wie Designerin */
      --line-height-body: 1.5; /* Konsistenter Zeilenabstand */
    }
  }
  
  body {
    background-color: var(--kf-primary-color-3);
    color: var(--kf-primary-color-1);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .container {
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
  
  a {
    color: var(--kf-primary-color-2);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  a:hover {
    color: var(--kf-primary-color-1);
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: var(--kf-primary-color-1);
    font-family: var(--font-family);
    line-height: var(--line-height-headings);
    margin-bottom: var(--space-md);
    font-weight: 600;
  }
  
  h1 { 
    font-size: var(--font-size-h1); 
    font-weight: 700; 
    margin-bottom: var(--space-lg);
  }
  h2 { 
    font-size: var(--font-size-h2); 
    font-weight: 600; 
    margin-bottom: var(--space-md);
  }
  h3 { 
    font-size: var(--font-size-h3); 
    font-weight: 600; 
    line-height: var(--line-height-h3);
    margin-bottom: var(--space-sm);
  }
  h4 { 
    font-size: var(--font-size-h4); 
    font-weight: 500; 
    margin-bottom: var(--space-sm);
  }
  h5 { 
    font-size: var(--font-size-h5); 
    font-weight: 500; 
    margin-bottom: var(--space-xs);
  }
  h6 { 
    font-size: var(--font-size-h6); 
    font-weight: 500; 
    margin-bottom: var(--space-xs);
  }
  

  
  blockquote {
    font-size: var(--font-size-quote);
    color: var(--kf-primary-color-1);
    border-left: 4px solid var(--kf-primary-color-2);
    padding-left: var(--space-md);
    margin: var(--space-lg) 0;
    font-style: italic;
    line-height: 1.5;
  }
  
  /* Section Spacing */
  section {
    padding: var(--section-spacing) 0;
  }
  
  /* Utility Classes */
  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-right { text-align: right; }
  
  .mb-0 { margin-bottom: 0; }
  .mb-1 { margin-bottom: var(--space-xs); }
  .mb-2 { margin-bottom: var(--space-sm); }
  .mb-3 { margin-bottom: var(--space-md); }
  .mb-4 { margin-bottom: var(--space-lg); }
  .mb-5 { margin-bottom: var(--space-xl); }
  
  .mt-0 { margin-top: 0; }
  .mt-1 { margin-top: var(--space-xs); }
  .mt-2 { margin-top: var(--space-sm); }
  .mt-3 { margin-top: var(--space-md); }
  .mt-4 { margin-top: var(--space-lg); }
  .mt-5 { margin-top: var(--space-xl); }
  
  footer {
    background: var(--kf-primary-color-3);
    color: var(--kf-primary-color-1);
    font-size: 0.875rem;
    text-align: center;
    padding: var(--space-3xl) var(--space-md);
  }
  
  footer a {
    color: var(--kf-primary-color-2);
    text-decoration: none;
    margin: 0 var(--space-sm);
  }
  
  footer a:hover {
    color: var(--kf-primary-color-1);
  }
  
  /* Responsive Images */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Focus States for Accessibility */
button:focus,
.button:focus,
a:focus {
    outline: 2px solid var(--kf-primary-color-2);
    outline-offset: 2px;
}

/* =====================================
   GENERATEBLOCKS PRO INTEGRATION
   ===================================== */

/* GenerateBlocks Text Element als Button */
a.gb-text {
    background-color: var(--kf-secondary-color-2); /* #571010 - CTA button color */
    color: var(--kf-primary-color-1); /* #ffffff - white text */
    padding: 8px 32px;
    font-size: var(--font-size-button); /* 18px */
    font-weight: 600;
    border: 5px solid var(--kf-border-color); /* #330606 - border color */
    border-radius: 0; /* ecken */
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-family);
}

a.gb-text:is(:hover, :focus) {
    background-color: var(--kf-secondary-color-2-1); /* #FFB100 - CTA hover */
}


  /* Primary Button Styling - Minimal */
  button, .button {
    background-color: var(--kf-secondary-color-2); /* #571010 - CTA button color */
    color: var(--kf-primary-color-1); /* #ffffff - white text */
    padding: 8px 32px;
    font-size: var(--font-size-button); /* 18px */
    font-weight: 600;
    border: 5px solid var(--kf-border-color); /* #330606 - border color */
    border-radius: 0; /* ecken */
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-family);
  }
  
  button:hover, .button:hover {
    background-color: var(--kf-secondary-color-2-1); /* #FFB100 - CTA hover */
  }

  
  /* =====================================
     JETFORM BUILDER - SCHRIFTGRÖSSEN
     ===================================== */

  /* JetFormBuilder Beschriftungen */
  .jet-form-builder__label-text {
    font-size: var(--font-size-h4); /* 24px */
  }

  /* JetFormBuilder Eingabefelder */
  .jet-form-builder__field input,
  .jet-form-builder__field textarea,
  .jet-form-builder__field select {
    font-size: var(--font-size-h4); /* 24px */
  }

  /* JetFormBuilder Placeholder */
  .jet-form-builder__field input::placeholder,
  .jet-form-builder__field textarea::placeholder {
    font-size: var(--font-size-h4); /* 24px */
  }

  /* Mobile Anpassungen */
  @media (max-width: 768px) {
    .jet-form-builder__label-text {
      font-size: var(--font-size-h5); /* 14px auf Mobile */
    }
    
    .jet-form-builder__field input,
    .jet-form-builder__field textarea,
    .jet-form-builder__field select {
      font-size: var(--font-size-h5); /* 14px auf Mobile */
    }
    
    .jet-form-builder__field input::placeholder,
    .jet-form-builder__field textarea::placeholder {
      font-size: var(--font-size-h5); /* 14px auf Mobile */
    }
  }

  /* =====================================
     CUSTOM FRAME STYLE
     ===================================== */
  
  /* Rahmen mit gelbem Verlauf in der unteren linken Ecke */
  .frame-border-gradient-right {
    position: relative;
    background: var(--kf-primary-color-3); /* Schwarz #000000 */
    border: 4px solid;
    border-image: linear-gradient(
      135deg,
      var(--kf-secondary-color-2-2) 0%, /* Dunkelrot oben/rechts */
      var(--kf-secondary-color-2-2) 60%, /* Dunkelrot bis 60% */
      var(--kf-primary-color-2) 100% /* Gelb #FFB100 unten/links */
    ) 1;
  }
  
  /* Rahmen mit gelbem Verlauf in der unteren linken Ecke */
  .frame-border-gradient-left {
    position: relative;
    background: var(--kf-primary-color-3); /* Schwarz #000000 */
    border: 4px solid;
    border-image: linear-gradient(
      225deg,
      var(--kf-secondary-color-2-2) 0%, /* Dunkelrot oben/rechts */
      var(--kf-secondary-color-2-2) 60%, /* Dunkelrot bis 60% */
      var(--kf-primary-color-2) 100% /* Gelb #FFB100 unten/links */
    ) 1;
  }
  
/* Print Styles */
  @media print {
    body {
      background: white;
      color: black;
    }
    

  }