/*Allgemeine Config Daten*/

/*Auth Guard - Versteckt geschützten Inhalt bis verifiziert*/
body:not([data-page="login"]):not([data-page="index"]) {
  visibility: hidden;
}

body:not([data-page="login"]):not([data-page="index"]).auth-verified {
  visibility: visible;
}

/*Farben Palette Preset*/
:root,
body {
  --bg: #0f172a;
  --panel: #111827;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --brand: #3b82f6;
  --brand-600: #2563eb;
  --border: #1f2937;
  --overlay: rgba(0, 0, 0, 0.55);
  --error: #ef4444;
  
  /*Layout Variablen*/
  --content-max-width: 1200px;
  --header-height: 63px;
  
  /*Kategorien Farben*/
  --category-0-start: #4f46e5;
  --category-0-end: #6366f1;
  --category-1-start: #f97316;
  --category-1-end: #fb923c;
  --category-2-start: #14b8a6;
  --category-2-end: #2dd4bf;
  --category-3-start: #ec4899;
  --category-3-end: #f472b6;
  --category-0-text: #ffffff;
  --category-1-text: #000000;
  --category-2-text: #000000;
  --category-3-text: #ffffff;
}

body.theme-dark,
:root body.theme-dark {
  --bg: #0f172a;
  --panel: #111827;
  --muted: #94a3b8;
  --text: #e5e7eb;
  --brand: #3b82f6;
  --brand-600: #2563eb;
  --border: #1f2937;
  --overlay: rgba(0, 0, 0, 0.55);
  --error: #ef4444;
  
  /*Kategorien Farben*/
  --category-0-start: #4f46e5;
  --category-0-end: #6366f1;
  --category-1-start: #f97316;
  --category-1-end: #fb923c;
  --category-2-start: #14b8a6;
  --category-2-end: #2dd4bf;
  --category-3-start: #ec4899;
  --category-3-end: #f472b6;
  --category-0-text: #ffffff;
  --category-1-text: #000000;
  --category-2-text: #000000;
  --category-3-text: #ffffff;
}

body.theme-light,
:root body.theme-light {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --muted: #4b5563;
  --text: #1f2937;
  --brand: #2563eb;
  --brand-600: #1d4ed8;
  --border: #e2e8f0;
  --overlay: rgba(0, 0, 0, 0.4);
  --error: #dc2626;
  
  /*Kategorien Farben*/
  --category-0-start: #e0e7ff;
  --category-0-end: #c7d2fe;
  --category-1-start: #ffedd5;
  --category-1-end: #fed7aa;
  --category-2-start: #ccfbf1;
  --category-2-end: #99f6e4;
  --category-3-start: #fce7f3;
  --category-3-end: #fbcfe8;
  --category-0-text: #000000;
  --category-1-text: #000000;
  --category-2-text: #000000;
  --category-3-text: #000000;
}

body.theme-colorblind,
:root body.theme-colorblind {
  --bg: #1b1f24;
  --panel: #101418;
  --muted: #b8c1cc;
  --text: #f5f5f5;
  --brand: #ff8c00;
  --brand-600: #ff6b35;
  --border: #2c3137;
  --overlay: rgba(0, 0, 0, 0.55);
  --error: #CC3311;
  
  /*Kategorien Farben*/
  --category-0-start: #AA6699;
  --category-0-end: #995588;
  --category-1-start: #009988;
  --category-1-end: #007766;
  --category-2-start: #DDCC77;
  --category-2-end: #ccbb66;
  --category-3-start: #AADDFF;
  --category-3-end: #88ccee;
  --category-0-text: #000000;
  --category-1-text: #ffffff;
  --category-2-text: #000000;
  --category-3-text: #ffffff;
}

* {
  box-sizing: border-box;
}











/*Webseiten Layout*/
body {
  margin: 0;
  padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--bg), var(--bg));
  color: var(--text);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

body:not([data-page="login"]) {
  padding-top: var(--header-height);
  min-height: 100vh;
}

html, body {
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}






/*Seiten Layout*/
.pageLayout {
  max-width: var(--content-max-width);
  margin: 16px auto;
  display: grid;
  grid-template-columns: minmax(200px, var(--content-max-width)) 1fr;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  padding: 0 clamp(0.75rem, 2vw, 1rem);
  width: 100%;
  box-sizing: border-box;
  flex: 1 0 auto;
  height: auto;
  overflow-y: visible;
  overflow-x: hidden;
}

.main-content-wrapper .pageLayout {
  flex: 1;
  min-width: 0;
  margin: 16px auto;
  max-width: var(--content-max-width);
  width: 100%;
  padding: 0 clamp(0.75rem, 2vw, 1rem);
  box-sizing: border-box;
  transition: margin-left 0.3s ease;
}

.pageLayout-impressum {
  grid-template-columns: 1fr !important;
  max-width: 1600px;
  flex: 1 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

.pageLayout-contact {
  grid-template-columns: 1fr !important;
  max-width: 1600px;
  flex: 1 0 auto;
  overflow: hidden;
}

.pageLayout-sidebar {
  max-width: var(--content-max-width);
  margin: 16px auto;
  display: block;
  flex: 1 0 auto;
  height: auto;
  padding-bottom: 16px;
  overflow: visible;
}

.main-content-wrapper .pageLayout-sidebar {
  flex: 1;
  min-width: 0;
  margin: 16px auto;
  max-width: var(--content-max-width);
  width: 100%;
  padding: 0 clamp(0.75rem, 2vw, 1rem);
  padding-bottom: 16px;
  box-sizing: border-box;
  transition: margin-left 0.3s ease;
}







/*Kontentbereich Layout*/
.contentLayout {
  min-height: 60vh;
  width: 100%;
  overflow-x: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.contentLayout-impressum {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
}

.contentLayout-contact {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  position: relative;
}






















/**************************************************************************************************************/
/**************************************************************************************************************/
/************************************RESOLUTION Abhangige Einstellungen****************************************/
/**************************************************************************************************************/
/**************************************************************************************************************/

@media (max-width: 768px) {
  .pageLayout,
  .main-content-wrapper .pageLayout {
    padding: 0 10px;
  }
}

@media (min-width: 1024px) {
  .main-content-wrapper:not(:has(.sidebar-navigation.collapsed)) .pageLayout {
    margin-left: max(calc(280px + 16px), calc((100vw - var(--content-max-width)) / 2));
    margin-right: auto;
  }

  .main-content-wrapper:has(.sidebar-navigation.collapsed) .pageLayout {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 1024px) {
  .main-content-wrapper:not(:has(.sidebar-navigation.collapsed)) .pageLayout-sidebar {
    margin-left: max(calc(280px + 16px), calc((100vw - var(--content-max-width)) / 2));
    margin-right: auto;
  }

  .main-content-wrapper:has(.sidebar-navigation.collapsed) .pageLayout-sidebar {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1024px) {
  html, body {
    height: auto;
    min-height: 100vh;
  }
  
  body {
    overflow-y: auto;
  }
  
  .main-content-wrapper {
    flex-direction: column;
  }
  
  .sidebar-navigation {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
    max-height: 50vh;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
  }
  
  .sidebar-navigation.mobile-open {
    transform: translateX(0);
  }
  
  .main-content-wrapper .pageLayout,
  .main-content-wrapper .pageLayout-sidebar {
    width: 100%;
    max-width: var(--content-max-width);
    margin: 16px auto;
  }
  
  .pageLayout {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    overflow-y: visible;
    min-height: auto;
  }

  .pageLayout-impressum {
    height: auto;
    max-height: none;
    overflow-y: visible;
  }

  .pageLayout-contact {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .contentLayout-impressum {
    height: auto;
    overflow-y: visible;
  }

  .contentLayout-contact {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

}