/* ======================================
   BQ – GLOBALE GRUNDEINSTELLUNGEN
   ====================================== */

html {
  font-size: 18px;
}

body,
#body-wrapper,
.wrapper,
.page-wrapper,
.main-content {
  background: #fffaef;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: #fffaef;
  color: #3D3D3D;
  font-size: 1rem;
  line-height: 1.75;
}

/* =========================
   02 TYPOGRAPHY (H1–H6)
   ========================= */

h1 {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.2;
  color: #4F583B;
}

h2 {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.3;
  color: #4F583B;
}

h3 {
  font-size: 1.3rem;
  font-weight: 500;
  color: #4F583B;
}

h4, h5, h6 {
  font-size: 1rem;
  font-weight: 500;
  color: #3D3D3D;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

/* =========================
   03 COMPONENTS (CARDS)
   ========================= */

.card {
  display: block;
  padding: 24px;
  border-radius: 14px;
  background: #ffffff;
  text-decoration: none;

  color: #3D3D3D; /* nur angepasst */
  
  box-shadow: 0 6px 18px rgba(234, 215, 178, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(234, 215, 178, 0.7);
}

/* TYPO ONLY */
.card h3 {
  margin-top: 0;
  margin-bottom: 10px;

  font-weight: 500;
  color: #4F583B; /* dein Grün */
}

.card p {
  margin: 0;
  opacity: 0.85;

  color: #3D3D3D;
  line-height: 1.6;
}

/* =========================
   CARD LINK STYLE (CLEAN)
   ========================= */

/* Grundzustand */
a.card {
  color: #3D3D3D;
  text-decoration: none;
}

/* Hover: dezente gelbe Linie */
a.card:hover {
  color: #3D3D3D;
  text-decoration: underline;
  text-decoration-color: #F4BB40;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

/* Sicherheit gegen Blau in allen Zuständen */
a.card:visited,
a.card:active,
a.card:focus {
  color: #3D3D3D;
}

/* =========================
   BUTTONS
   ========================= */

.button,
a.button,
a.button:link,
a.button:visited,
a.button:active,
a.button:focus,
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 42px 40px;
  border-radius: 20px;

  background: #ffffff !important;
  color: #4F583B !important;

  text-decoration: none !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;

  border: 1px solid #F4BB40 !important;
  cursor: pointer;

  transition: all 0.2s ease;
}

.button:hover,
a.button:hover,
button:hover {
  background: #F4BB40 !important;
  color: #4F583B !important;
  text-decoration: none !important;
}

/* =========================
   QUARK BACKGROUND OVERRIDE
   ========================= */

.g-wrapper,
.g-container,
.g-content,
.page-wrapper,
.content-wrapper,
.main-content,
.section,
.default,
#body-wrapper {
  background-color: #fffaef !important;
}

/* =========================
   NAVIGATION BLEIBT WEISS
   ========================= */

.header,
.header-wrapper,
.navigation,
.navbar,
.g-header,
#header {
  background: #ffffff !important;
}

/* ======================================
   MODULABSTÄNDE
   ====================================== */

.modular-text {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* =========================
   ABSTAND BILD ↔ TEXT
   ========================= */

.columns.left .column,
.columns.right .column {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* =========================
   VERTIKALE ZENTRIERUNG
   Bild ↔ Text
   ========================= */

.columns.left,
.columns.right {
  align-items: center;
}

/* =========================
   BESSERE COLUMN BALANCE
   ========================= */

.columns.left .col-6:first-child,
.columns.right .col-6:first-child {
  flex: 0 0 58%;
  max-width: 58%;
}

.columns.left .col-6:last-child,
.columns.right .col-6:last-child {
  flex: 0 0 42%;
  max-width: 42%;
}

/* =========================
    BILDQUALITÄT
  ========================= */
   
.columns img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(255, 210, 30, 0.12);
}

/* =========================
   GLOBAL TEXT LINKS
   ========================= */

/* Grundzustand */
a:not(.button):not(.card) {
  color: #4F583B;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Hover */
a:not(.button):not(.card):hover {
  color: #3D3D3D;
  text-decoration: underline;
  text-decoration-color: #F4BB40;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* Besuchte Links */
a:not(.button):not(.card):visited {
  color: #4F583B;
}

/* =========================
   NAVIGATION LINKS (GLOBAL)
   ========================= */

.navbar a,
#header a,
.header a,
.navigation a {
  color: #4F583B !important;
  text-decoration: none !important;
}

/* kein Hover-Style */
.navbar a:hover,
#header a:hover,
.header a:hover,
.navigation a:hover {
  color: #4F583B !important;
  text-decoration: none !important;
}

/* =========================
   NAVIGATION TYPOGRAPHY
   ========================= */

.navbar a,
#header a,
.header a,
.navigation a {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.content-blocks {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 8rem;
}


.content-blocks__hero {
    width: 100%;
    margin-bottom: 3rem;
}

/* =========================
   Content Blocks
   ========================= */

.content-blocks {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 8rem;
}


.content-blocks__hero {
    width: 100%;
    margin-bottom: 3rem;
}


/* =========================
   CONTENT BLOCK
   ========================= */

.content-block {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin: 4rem 0;
    margin-bottom: 0;
}


.content-block--left {
    flex-direction: row;
}


.content-block--right {
    flex-direction: row-reverse;
}


/* =========================
   BILD
   ========================= */

.content-block__image {
    flex: 0 0 auto;
}

.content-block__image img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================
   BILD-BREITEN
   ========================= */

.content-block__image--25 {
    width: 25%;
}

.content-block__image--33 {
    width: 33.333%;
}

.content-block__image--50 {
    width: 50%;
}

.content-block__image--66 {
    width: 66.666%;
}

.content-block__image--75 {
    width: 75%;
}


/* =========================
   TEXT
   ========================= */

.content-block__text {
    flex: 1 1 auto;
    min-width: 0;
}


/* =========================
   TEXTAUSRICHTUNG
   ========================= */

.content-block__text--left {
    text-align: left;
}

.content-block__text--center {
    text-align: center;
}

.content-block__text--right {
    text-align: right;
}

.content-block__text--justify {
    text-align: justify;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 768px) {

    .content-block,
    .content-block--left,
    .content-block--right {
        flex-direction: column;
    }


    .content-block__image,
    .content-block__image--25,
    .content-block__image--33,
    .content-block__image--50,
    .content-block__image--66,
    .content-block__image--75 {
        width: 100%;
    }

}


/* =========================
   MODULAR CONTENT BLOCKS
   ========================= */

.content-text-block,
.content-image-block {
    margin-bottom: 4rem;
}

/* ==========================================
   Mobile Navigation – Corporate Design
   ========================================== */

/* Hamburger-Icon (drei Striche) */
.mobile-menu .button_container span {
    background: #F4BB40 !important; /* Gelb */
}

/* Schließen-X nach dem Öffnen */
.mobile-menu .button_container.active .top,
.mobile-menu .button_container.active .middle,
.mobile-menu .button_container.active .bottom {
    background: #F4BB40 !important; /* Gelb */
}

/* Links im mobilen Menü */
.mobile-menu a {
    color: #4F583B !important;               /* Grün */
    text-decoration-color: #F4BB40 !important; /* Gelbe Unterstreichung */
}

/* Aktiver Menüpunkt */
.mobile-menu .active > a,
.mobile-menu a.active {
    color: #F4BB40 !important; /* Gelb */
}

/* Hover und Fokus */
.mobile-menu a:hover,
.mobile-menu a:focus {
    color: #F4BB40 !important;
}

/* Normale Menüeinträge */
.treemenu li a {
    color: #4F583B;
}

/* Aktiver Menüpunkt, Hover und Fokus */
.treemenu li a:hover,
.treemenu li a:focus,
.treemenu li a.active {
    color: #F4BB40 !important;
    text-decoration: underline;
    text-decoration-color: #F4BB40;
}

.overlay {
    background: #fffaef;
}

.treemenu li {
    background: rgba(132, 169, 53, 0.08);
}

body {
  outline: 10px solid red !important;
}