/* STRUCTURE from template presets
Body, Toolbar, Header, Header mobile, Menu, Bottom, Footer
*/

/*==========================================
  VARIABLES & ROOT STYLES
==========================================*/
:root {
  --color-background: #F9F9F9;
  --color-primary: #58C472;         /* Grasgrün (Logo) */
  --color-primary-dark: #1B5E20;    /* Tieferes Grün für Hover/Buttons */
  --color-secondary: #37474F;       /* Grau-Blau für Textblöcke */
  --color-accent: #FF9800;          /* Optimiertes Orange */
  --color-heading: #1C1C1C;         /* Tiefes Schwarzgrau */
  --color-subheading: #2E2E2E;
  --color-text: #333333;
  --color-light-bg: #FFFFFF;
  --color-step-green: #64DD17;      /* Helles Grün für Schritte */
  --brand-green: #58C472;
}

/*==========================================
  BODY
==========================================*/
body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: "segoe-ui", sans-serif !important;
  font-weight: 400;
  font-style: normal;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-heading);
  font-family: "segoe-ui", sans-serif !important;
}

/* Responsive Typography with rem units */
h1 {
  font-size: 1.5rem; /* Mobile */
  line-height: 1.2;
}

h2 {
  font-size: 1.2rem; /* Mobile */
  line-height: 1.3;
}

@media (min-width: 576px) {
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
}

@media (min-width: 768px) {
  h1 { font-size: 2rem; } /* Max size for desktop viewing */
  h2 { font-size: 1.5rem; } /* Max size for desktop viewing */
  h3 { font-size: 1.2rem; } /* Max size for desktop viewing */

  .uk-h3, h3 {
font-size: 1.2rem;
line-height: 1.4;
}
}

/* Links */
a {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-accent);
}

/* Buttons - All with 10px border radius */
button, .btn {
  border-radius: 10px;
  padding: 0.6em 1.2em;
  font-weight: 400;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

/* UK Button Primary - High contrast for light/dark backgrounds */
.uk-button.uk-button-primary,
.uk-button-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-background) !important;
  border-color: var(--color-primary) !important;
  border-radius: 10px !important;
  font-weight: 400;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.uk-button.uk-button-primary:hover,
.uk-button.uk-button-primary:focus,
.uk-button-primary:hover,
.uk-button-primary:focus {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
  outline: 2px solid var(--color-accent);
}

/* UK Button Secondary - High contrast for light/dark backgrounds */
.uk-button.uk-button-secondary,
.uk-button-secondary {
  background-color: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-accent) !important;
  border-radius: 10px !important;
  font-weight: 400;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.uk-button.uk-button-secondary:hover,
.uk-button.uk-button-secondary:focus,
.uk-button-secondary:hover,
.uk-button-secondary:focus {
  background-color: var(--color-accent) !important;
  color: #fff !important;
  border-color: var(--color-primary) !important;
  outline: 2px solid var(--color-primary);
}

/* Special QuaSi Logo Classes */
h1.quasi-logo { 
  font-family: "segoe-ui", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #ffffff !important;
  letter-spacing: -0.02em;
}

h1.quasi-logo-dark { 
  font-family: "segoe-ui", sans-serif;
  font-weight: 700;
  font-size: 3rem;
  color: #37474F !important;
  letter-spacing: -0.02em;
}

span.quasi-logo {
  color:#51b618 !important;
 
}

.quasi-logo-dark span.quasi-logo {
  color:#51b618 !important;
  font-size: 3.75rem;
}

/* Section Classes */
.section-green {
  background-color: var(--color-primary);
  color: var(--color-light-bg);
}

.section-dark {
  background-color: var(--color-secondary);
  color: var(--color-light-bg);
}

/* Steps */
.step-number {
  color: var(--color-step-green);
  font-weight: bold;
  font-size: 1.2em;
}

/* Headlines with Accent */
h2 span.accent {
  color: var(--color-accent);
}

/* Blockquote styling */
blockquote {
  margin: 0 0 1rem;
  padding-left: 1rem !important;
}

/*==========================================
  TOOLBAR (Top Bar)
==========================================*/
.tm-headerbar-top {
  background-color: var(--color-secondary) !important;
}

/*==========================================
  HEADER
==========================================*/
.tm-header {
  background-color: var(--color-secondary) !important;
  padding: 0;
  border-top: 10px solid var(--color-primary) !important;
  border-bottom: 2px solid var(--color-primary) !important;
  position: relative;
  width: 100%;
  z-index: 99;
  box-shadow: none;
  animation: 0.5s ease 0s 1 normal none running tmFadeIn;
}
.tm-headerbar-top {
	padding: 10px 0;
}
.tm-header .uk-navbar-container:not(.uk-navbar-transparent) {
  background-color: var(--color-secondary) !important;
  border-top: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.tm-header.header-sticky {
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
  background-color: var(--color-secondary) !important;
}

.uk-sticky .uk-navbar-container {
  border-top: 0px solid var(--color-primary);
  line-height: 40px;
}

/* Header Logo Positioning */
.uk-navbar-left img,
.uk-navbar-right img {
  height: 100%;
  max-height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Sticky Logo Control */
.sticky-logo {
  display: none;
}

.uk-navbar-sticky .sticky-logo {
  display: block;
}

.sticky-logo img {
    max-height: 3rem;
    height: auto;
    width: auto;
    object-fit: contain;
}

/*==========================================
  HEADER MOBILE
==========================================*/
.tm-header-mobile {
  /* Mobile header already defined in HTML structure */
}

.tm-header-mobile .uk-navbar-container:not(.uk-navbar-transparent) {
  background: var(--color-secondary);
}

.tm-header-mobile .uk-navbar-toggle {
  color: #FF9800;
}

.tm-header-mobile img {

}

/* Mobile Responsive */
@media (max-width: 767.98px) {
  .uk-navbar-left img,
  .uk-navbar-right img {
    max-height: 2.5rem;
  }
}

/*==========================================
  MENU / NAVIGATION
==========================================*/
.uk-navbar-nav {
  justify-content: center;
  text-align: center;
}

.uk-navbar .uk-flex-center {
  justify-content: center;
}

.uk-navbar .uk-flex-center .uk-text-center {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Menu Typography */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.menu.nav-pills > li > a,
.menu.nav-pills > li > span,
.menu.nav-pills .sp-dropdown li.sp-menu-item > a,
.uk-navbar-nav > li > a,
.uk-navbar-nav > li > span {
  font-family: "segoe-ui", sans-serif !important;
}

.tm-header .uk-navbar-nav > li > a {
  color: var(--color-primary);
}

/* Menu Hover States */
.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li > a:focus,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li > span:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:focus,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a,
.menu.nav-pills > li > a:hover,
.menu.nav-pills > li > a:focus,
.menu.nav-pills > li.active > a,
.menu.nav-pills > li > span:hover,
.menu.nav-pills .sp-dropdown li.sp-menu-item > a:hover,
.menu.nav-pills .sp-dropdown li.sp-menu-item > a:focus,
.menu.nav-pills .sp-dropdown li.sp-menu-item.active > a,
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li > a:focus,
.uk-navbar-nav > li.uk-active > a,
.uk-navbar-nav > li > span:hover {
  color: var(--color-accent);
}

/* More specific navbar hover rule to override template.css */
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li > a:focus {
  color: var(--color-accent) !important;
}

/* Mobile Menu Toggle */
.uk-navbar-toggle span {
 /* background-color: var(--color-accent) !important;*/
}

.uk-navbar-toggle:hover span {
 /* background-color: var(--color-primary) !important;*/
}

.uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle {
  font-size: 1.25rem;
  min-height: 60px;
}

/* Center menu on large screens */
@media (min-width: 992px) {
  .uk-navbar-nav {
    margin: 0 auto;
    justify-content: center;
  }
}

/*==========================================
  BOTTOM / MAIN CONTENT
==========================================*/
#sp-main-body {
  padding:120px 0 10px 0;
  background-color: var(--color-secondary);
}

.com-content #sp-main-body {
  background-color: var(--color-secondary);
}

#sp-main-body.container-inner {
  background-color: var(--color-background);
}

.uk-section .site-footer {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/*==========================================
  FOOTER
==========================================*/
#sp-footer {
  /* Footer styling */
}

/* Remove margins from grid stack items and center content vertically */
#sp-footer .uk-grid-stack > div {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
}

/* Override UIKit grid margins in footer */
#sp-footer .uk-grid-stack .uk-grid-margin {
  margin-top: 0 !important;
}

/* Add borders to middle div */
#sp-footer .uk-grid-stack > div:nth-child(2) {
  border-top: 1px solid var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
  padding-top: 20px;
  padding-bottom: 20px;
}
#sp-footer .uk-grid-stack a {
margin: 0 10px;
}

.uk-section.uk-section-muted {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-top: 1px solid #dee2e6;
}

/*==========================================
  SPECIAL COMPONENTS
==========================================*/

/* FAQ Page Components */
.notification-bar {
  background-color: var(--brand-green);
  color: white;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.success-bar {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  padding: 15px;
  border-radius: 8px;
  margin: 15px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.status-card {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 20px;
  margin: 15px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.status-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.progress-step {
  display: flex;
  align-items: center;
  margin: 15px 0;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 12px;
  transition: background-color 0.2s ease;
}

.progress-step.completed {
  background-color: #d4edda;
}

.progress-number {
  background-color: var(--brand-green);
  color: white;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  font-weight: bold;
  font-size: 14px;
}

/* Enhanced Accordion Styling */
.process-accordion .uk-accordion-title {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border: 1px solid #e9ecef;
  border-radius: 12px;
  padding: 18px 24px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #2c3e50;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.process-accordion .uk-accordion-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--brand-green);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.process-accordion .uk-accordion-title:hover {
  background: linear-gradient(135deg, var(--brand-green) 0%, #4a9d5f 100%);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(88, 196, 114, 0.3);
  border-color: var(--brand-green);
}

.process-accordion .uk-accordion-title:hover::before {
  transform: scaleY(1);
}

.process-accordion .uk-accordion-title[aria-expanded="true"] {
  background: linear-gradient(135deg, var(--brand-green) 0%, #4a9d5f 100%);
  color: white;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(88, 196, 114, 0.25);
}

.process-accordion .uk-accordion-title[aria-expanded="true"]::before {
  transform: scaleY(1);
}

.process-accordion .uk-accordion-content {
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 24px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* QuaSi 2-Column Blocks Layout */
.qun-blocks-2-col .sppb-quasiblocknumber-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.qun-blocks-2-col .sppb-quasiblocknumber-item:nth-child(even) .sppb-quasiblocknumber-text,
.qun-blocks-2-col .sppb-quasiblocknumber-item:nth-child(even) .sppb-quasiblocknumber-text * {
  text-align: right;
}

.qun-blocks-2-col .sppb-quasiblocknumber-item:nth-child(odd) .sppb-quasiblocknumber-text,
.qun-blocks-2-col .sppb-quasiblocknumber-item:nth-child(odd) .sppb-quasiblocknumber-text * {
  text-align: left;
}

/* UK Button Default - Consistent with primary/secondary */
.uk-button.uk-button-default,
.uk-button-default {
  border-radius: 10px !important;
  border: 2px solid var(--color-primary) !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
  color: #495057 !important;
  font-weight: 400;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.uk-button.uk-button-default:hover,
.uk-button.uk-button-default:focus,
.uk-button-default:hover,
.uk-button-default:focus {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
  color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  outline: 2px solid var(--color-accent);
}

.sppb-btn-success {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  border-radius: 10px;
}

/* Card Enhancements */
.uk-card.uk-card-default.uk-card-body {
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  border: 1px solid #e9ecef;
}

.uk-card-title {
  color: #2c3e50;
  font-weight: 700;
}

/* Section Headings */
.uk-heading-small {
  background: linear-gradient(135deg, var(--brand-green) 0%, #4a9d5f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* my additions */
.uk-table th {
   
    font-weight: 600!important;
    color: #FFFFFF !important;
  
}
  .tm-header-mobile {
   
 border-bottom: 1px solid var(--color-primary);
}

/*#### start MEDIA QUERIES ####*/
/* Extra small devices (phones) */
@media (max-width: 575.98px) { }

/* Small devices (landscape phones) */
@media (min-width: 576px) and (max-width: 767.98px) { }

/* Medium devices (tablets) */
@media (min-width: 768px) and (max-width: 991.98px) { }

/* Large devices (desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) { }

/* Extra large devices (large desktops) */
@media (min-width: 1200px) { }
@media (min-width: 992px) {
.uk-section {
padding-top: 0px;
padding-bottom: 0px;
}
.uk-margin-small-bottom {
margin-bottom: 2rem !important;
}
}
/* Responsive heading sizes */
.uk-card-title {
  font-size: 1.1rem; /* Mobile: smaller */
  line-height: 1.3;
  word-wrap: break-word;
}

@media (min-width: 640px) {
  .uk-card-title {
    font-size: 1.25rem; /* Tablet: medium */
  }
}

@media (min-width: 960px) {
  .uk-card-title {
    font-size: 1.5rem; /* Desktop: larger */
  }
}
/*#### end MEDIA QUERIES ####*/


/* LOCAL ADJUSTMENTS */
#sp-main-body { /* from 331 */
	padding: 10px 0 10px 0;
	background-color: var(--color-secondary);
}

/*##### Specific to #quasi-page-header ####*/
#quasi-page-header {
}
.quasi-page-hero {
   
}
.quasi-hero-image-section {

}
.quasi-header-text-area h2 {
  margin-top: 0;
  color: #FFFFFF !important;
  animation: slideInFromLeft 1.2s ease-out;
  font-size: 2.5rem;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(300px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
#quasi-page-header {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 2rem;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
  
}