/* =====================================================
   Base Typography & Colors
   ===================================================== */

:root {
  --font-main: 'Source Sans Pro', sans-serif;
  --font-hand: 'Gochi Hand', cursive;

  --text-dark: #000;
  --text-light: #fff;
  --accent-green: #3cc13c;
  --shadow-dark: rgba(0, 0, 0, 0.5);

  --transition-fast: 0.25s ease-in-out;
}

/* =====================================================
   General Text Styles
   ===================================================== */

.slogan {
  padding: 70px 15px;
  font-family: var(--font-main);
  text-align: center;
  color: var(--text-light);
  text-shadow: 0 0 10px var(--shadow-dark);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.txt,
.bio,
.txthilfsprojekte {
  padding: 10px;
  font-family: var(--font-main);
  color: var(--text-dark);
  line-height: 1.6;
}

.txt,
.txthilfsprojekte {
  text-align: center;
}

.bio {
  text-align: left;
}

.txthilfsprojekte {
  color: var(--accent-green);
  font-weight: 600;
}

.handwriting {
  text-align: center;
  font-family: var(--font-hand);
  color: var(--text-light);
  text-shadow: 0 0 10px var(--shadow-dark);
  font-size: 1.4em;
}

/* =====================================================
   Menu Styles
   ===================================================== */

.menue,
.menuedrop {
  font-family: var(--font-main);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.menuedrop {
  text-align: center;
}

/* =====================================================
   Marketing Sections
   ===================================================== */

.marketing {
  text-align: center;
  margin: 60px auto;
  max-width: 1200px;
}

.marketing .col-lg-4 {
  margin-bottom: 30px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.marketing .col-lg-4:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.marketing h2 {
  font-weight: 600;
  margin-top: 15px;
}

.marketing .col-lg-4 p {
  margin: 0 15px;
  color: #333;
}

/* =====================================================
   Featurettes (modern Bootstrap-like sections)
   ===================================================== */

.featurette-divider {
  margin: 100px 0;
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, #ddd, transparent);
}

.featurette-heading {
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #222;
}

.marginBottom-0 {
  margin-bottom: 0 !important;
}

/* =====================================================
   Dropdown (modernized Bootstrap style)
   ===================================================== */

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -4px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  transform: translateX(10px);
  opacity: 0;
  visibility: hidden;
}

.dropdown-submenu:hover > .dropdown-menu {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.dropdown-submenu > a::after {
  content: "›";
  float: right;
  margin-top: 2px;
  margin-right: -5px;
  font-size: 0.8em;
  color: #888;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.dropdown-submenu:hover > a::after {
  transform: translateX(2px);
  color: #333;
}

/* Optional Left-Oriented Submenu */
.dropdown-submenu.pull-left > .dropdown-menu {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 10px;
  border-radius: 8px;
}