/* ==========================================================
   GLOBAL STYLES & LAYOUT
   ========================================================== */
html, body {
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  font-family: var(--mdb-font-roboto);
  line-height: 1.6;
  color: #4f4f4f;
  overflow-x: hidden;
}

/* ==========================================================
   NAVBAR & HEADER
   ========================================================== */
.navbar.stick-top {
  position: sticky !important;
  top: 0 !important;
  left: 0;
  right: 0;
  margin: 0;
}

.navbar .nav-link {
  color: #fff !important;
}

/* Dropdown-Menüs */
.dropdown-menu {
  z-index: 2000 !important;
  position: absolute !important;
  top: 100% !important;
  margin-top: 0.5rem;
}

/* Navbar-Alternativen */
#nav2 {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Hauptinhaltsbereich bündig unter Navbar */
.main-content,
#main-content {
  margin: 0;
  padding-top: var(--navbar-offset, 56px);
}
main { padding-top: 4rem; }
.section-col:hover { transform: translateY(-3px); transition: .3s; }

/* Seiten-Header direkt unter Navbar */
#page-header,
.sticky-header {
  margin: 0;
  background-color: #fff;
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 100;
}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer {
  position: static;
  align-content: center;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding-bottom: 2em;
  max-height: 20%;
}

/* ==========================================================
   LOGIN & RESET PASSWORD
   ========================================================== */
#login, #resetpassword {
  display: grid;
  justify-content: center;
  align-items: center;
}

#login {
  margin: auto;
}

#resetpassword {
  padding-top: 5em;
  margin-top: 5em;
}

#loginBackground {
  background-image: url(/img/messy-pizza-on-a-black-table.jpg);
  height: 1200px;
}

/* Login site background-image */
#intro {
  background-image: url(/img/loginregister.jpg);
  height: 100vh;
  margin-top: 0;
}

@media (min-width: 992px) {
  #intro { /* margin-top: -58.59px; optional */ }
}

/* ==========================================================
   STARTSEITE / DISCOVER / SHOP
   ========================================================== */
#wrapper {
  background-color: #E3E3E0;
}

#headerdiscover,
.header {
  text-align: center;
  align-content: center;
}

#headerpicture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 15em;
}

#discovercolumn {
  align-content: center;
  text-align: center;
  padding-top: 7em;
}

/* Shop Placeholder */
#shop {
  background-image: url(/img/inprogress.jpg);
  height: 100vh;
  margin-top: 0;
}

@media (min-width: 992px) {
  #shop { /* margin-top: -58.59px; optional */ }
}

/* ==========================================================
   REZEPTBEREICH
   ========================================================== */
.container-newrecipe {
  background-color: #eadebd;
  margin: 1em;
  padding: 0.5em;
}

.container-newrecipe-new {
  background-color: #dddddd;
  margin: 1em;
  padding: 0.5em;
}

#newrecipetext { margin-right: 1em; }

#headernewrecipe { margin: 1em; }

h1 { top: inherit; }
h2 { font-size: 2em; }

#recipeheader { margin-top: 5em; }

.recipeheadpic {
  object-fit: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 30rem;
  max-height: 30rem;
}

.recipecontentpic {
  object-fit: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 20rem;
  max-height: 20rem;
}

#createRecipePic {
  max-height: 30em;
  align-items: center;
  justify-content: center;
}

.picupload {
  margin-left: 1em;
  margin-right: 1em;
}

/* Tabellen */
#colactions { width: 10px; }
#coldescription { width: 120px; }

#showrecipetable { padding: 2em; }

#showrecipetext {
  color: mediumgray;
  border: 2px solid;
}

#showrecipecolumn {
  align-content: center;
  text-align: center;
  padding-top: 1em;
}

/* ==========================================================
   MY PROFILE / USER AREA
   ========================================================== */
.myprofile {
  margin: 2em;
}

#myprofile {
  margin-top: 6em !important;
  background-color: #ffffff;
}

#username, #rightelements {
  color: #FFFFFF;
}

#profilPic {
  object-fit: contain;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 20rem;
  max-height: 20rem;
}

/* ==========================================================
   MY RECIPES TABLE
   ========================================================== */
#myrecipeshead {
  margin-top: 0; /* wurde vorher 5em - jetzt dynamisch */
}

#myrecipestable {
  margin-left: 4em;
  margin-right: 4em;
}

.form-outline {
  margin: 1em;
  background-color: white;
}

.autocomplete { margin-left: 1em; }

#ingredientsTable {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================
   BLOG / MEDIA
   ========================================================== */
#blogMainPicture {
  object-fit: contain;
  max-width: 30em;
  max-height: 30em;
}

.recipes-img {
  object-fit: cover;
  height: 350px;
  width: 100%;
  overflow: hidden;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ==========================================================
   DIVERSES
   ========================================================== */
#recipeheadcontainerright { padding: 2em; }

#navbarDropdownProfil { color: #000000; }

#zeile { margin-bottom: 10px; }

#discord { margin-top: 6em; }

/* ==========================================================
   AUTOCOMPLETE (jQuery UI)
   ========================================================== */
.ui-autocomplete {
  z-index: 3000 !important;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: .5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
  max-height: 240px;
  overflow-y: auto;
  padding: .25rem;
}

.ui-menu-item-wrapper.ui-state-active {
  background: #0d6efd !important;
  color: #fff !important;
  border-radius: .25rem;
}

/* ==========================================================
   EINHEITLICHE TABELLENOPTIK
   ========================================================== */
.table td, .table th {
  vertical-align: middle;
  white-space: nowrap;
}
/* Container fixiert oben rechts */
.alert-container {
  width: 25%;
  max-width: 350px;
}

/* Schöner Schatten + Animation */
.custom-alert {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.4s ease-out;
  border-radius: 0.5rem;
}

/* Slide-in Animation */
@keyframes slideIn {
  from {
    transform: translateX(120%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}