/* ------------------------------------------------------------------------------------------------------------------------------------------
Project: revierbox.de
Version: 0.0.1
Created: 2026-05-08
Last modified: 2026-05-20
------------------------------------------------------------------------------------------------------------------------------------------ */

/* Table of Content
==================================================
	
	#Basic Styles
	#Typography
	#Links
	#Buttons
	#Site Styles
	#Page Styles
	#Plugins
	#Media Queries
	#Print Styles */



/* #Basic Styles
================================================== */

:root,
[data-bs-theme=light] {
  --bs-link-decoration: none;
  --bs-secondary-font-sans-serif: 'Urbanist', sans-serif;
  --bs-secondary-font-family: var(--bs-secondary-font-sans-serif);
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-bg: #182028;
  --bs-body-bg-rgb: 25, 30, 35;
	
  --bs-gray-500-rgb: 173, 181, 189;
	
  --bs-highlight-color:var(--bs-light);
  --bs-highlight-bg: var(--bs-info);
  --bs-link-color: var(--bs-secondary);
  --bs-link-hover-color: var(--bs-gray-500);
  --bs-link-color-rgb: var(--bs-secondary-rgb);
  --bs-link-hover-color-rgb: var(--bs-gray-500-rgb);
}


/* HTML */

/*html { 
	font-size: 0.9rem;
}

@media (min-width: 1200px) {
    html { 
		font-size: 1rem;
	}
}

@media (min-width: 1600px) {
    html { 
		font-size: 1.1rem;
	}
}*/


/* BODY */

html, 
	body,
	.site {
	height: 100%;
}

body {
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

@media (min-width: 1200px) {
	
	body {
		/*font-size: 18px;
		line-height: 30px;*/
		font-size: 1.125rem;
		line-height: 1.68;
	}
}

::-moz-selection {
    background: var(--bs-info);
    color: var(--bs-white);
}

::selection {
    background: var(--bs-info);
    color: var(--bs-white);
}

::-webkit-selection {
    background: var(--bs-info);
    color: var(--bs-white);
}



/* #Typography
================================================== */

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1, 
	.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  	font-family: var(--bs-secondary-font-family);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {}

p {
  /*margin-bottom: 1rem;*/
  margin-bottom: 1.25rem;
}

p img {
    margin: 0;
}

.keine-trennung {
	-webkit-hyphens: none; /* Safari */
	-ms-hyphens: none;     /* IE 10+ */
	hyphens: none;         /* Standard */
}

.kein-umbruch {
	white-space: nowrap;
}



/* #Links
================================================== */

a {
	text-decoration: var(--bs-link-decoration);
	-webkit-transition: color 0.15s ease-out;
	-moz-transition: color 0.15s ease-out;
	-o-transition: color 0.15s ease-out;
	transition: color 0.15s ease-out;
}



/* #Buttons
================================================== */

.btn {
	--bs-btn-font-family: var(--bs-secondary-font-family);
}



/* #Site Styles
================================================== */

/* HEADER */

.site-header,
	.home.blog .site-header { 
	/*background-color: transparent; 
	height: auto;
    overflow: hidden;
    position: relative;
    width: 100%;*/
	height: 4.75rem;
}

.home .site-header { 
	height: auto;
}

@media (min-width: 1200px) {
	
	.site-header,
		.home.blog .site-header { 
		height: 7rem;
	}
}


/* NAVBAR-BRAND */

.navbar-brand {
	font-family: var(--bs-secondary-font-family);
	line-height: 1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.navbar-brand:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

.navbar-brand img {
	height: 2.25rem;
}

@media (min-width: 1200px) {
	
	.navbar-brand {
		font-size: 1.5rem;
	}
}


/* NAVBAR */

.navbar {
	background: transparent;
	left: 0; 
	padding: 1rem; 
	position: absolute;
	top: 0; 
	width: 100%; /*only for image in header */
	z-index: 100; /* Nur für Morphing Search*/
}

.navbar-service  {
	line-height: 1;
}

@media (max-width: 1199px) {
	
	.navbar-service .btn {
		--bs-btn-padding-x: 0;
		--bs-btn-padding-y: 0;
		--bs-btn-font-size: 0.75rem;
		align-items: center;
		display: flex;
		place-content: center;
		height: 2.5rem; 
		width: 2.5rem; 
	}

	.navbar-service .fa-pen-to-square::before {
		content: "\f304";
	}

	.navbar-service span {
		display: inline-block;
		position: relative;
		text-indent: -10000em;
		width: 0;
	}
}

@media (min-width: 1200px) {
	
	.navbar {
		padding: 2rem 3rem; /*only for image in header */
	}
	
	.navbar-service .btn {
		--bs-btn-padding-x: 1.25rem;
		--bs-btn-padding-y: 0.688rem;
	}

	.navbar-service .btn i {
		display: inline-block;
		position: relative;
		text-indent: -10000em;
		width: 0;
	}
}


/* NAVBAR TOGGLER */

.navbar-toggler {
	align-items: center;
	background-color: var(--bs-white);
	border-radius: var(--bs-border-radius-pill);
	color: var(--bs-body-bg);
	height: 2.5rem; 
	place-content: center;
	width: 2.5rem; 
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.navbar-toggler:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
}

.navbar-toggler:focus {
  	box-shadow: none;
}	

.navbar-toggler-icon { 
	background-image: none;
	place-content: center;
}

@media (min-width: 1200px) {

	.navbar-toggler {
		font-size: 1.5rem;
		height: 3rem; 
		width: 3rem; 
	}
}


/* OFFCANVAS */

.offcanvas-header .btn-close {
    opacity: 1;
	filter: alpha(opacity=100);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.offcanvas-header .btn-close:hover {
    opacity: 0.5;
	filter: alpha(opacity=50);
}

.offcanvas-header .btn-close:focus {
  	box-shadow: none;
}

.underloop-offcanvas {
	padding-top: 25px;
}

.offcanvas-bottom {	
	font-size: 20rem;
	font-size: clamp(18rem, 20vw, 20rem);
}


/* MAIN */

.site-main { 
    padding: 25px 0;
}

@media (min-width: 768px) {
	
	.site-main { 
		padding: 50px 0;
	}
}

@media (min-width: 1200px) {
	
	.site-main { 
		padding: 75px 0;
	}
}


/* SITE-INFO */

.site-info {
    /*color: inherit;*/ 
	font-size: 0.875rem;
	/*letter-spacing: 0;
	line-height: 30px;*/
	/*margin: 0;
   padding: 1.25rem 0;*/
	/*text-transform: none;*/
}

.site-info a, 
	.fsite-info a:visited {
    color: inherit;
}

.site-info a:hover, 
	.site-info a:focus {
    color: var(--bs-link-hover-color);
}

@media (min-width: 1200px) {

	.site-info {
		font-size: 1rem;
		/*padding: 1.25rem 1rem;*/
    }
}


/* FOOTER-NAV */

.footer-nav ul {
    margin: 0;
    padding: 0;
}

.footer-nav ul li {
    display: inline-block;
	/*margin: 0;*/
}

.footer-nav ul li:after {
    content: ".";/*"|";*/
    margin: 0 .375rem 0 .75rem;
	/*padding: 0;
	position: relative;*/
}

.footer-nav ul li:last-child:after {
    content: "";
    margin: 0;
}

@media (max-width: 767px) {
	
    .footer-nav {
        margin-bottom: 1rem;
    }
}

@media (min-width: 768px) {
	
    .footer-nav {
        text-align: right;
    }
}	


/* #Page Styles
================================================== */

/* HERO */
	
.ul-hero {
	border-bottom: 0px dashed #ffcc00;
    /*min-height: 400px;*/
	height: 100%;
    margin: 0;
	position: relative;
	/*overflow: hidden;
	z-index: 1;*/
}

.ul-hero h1 {	
	font-size: 20rem;
	font-size: clamp(2rem, 20vw, 20rem);
}
	
.hero-inner { 
	height: 100%;
	position: relative;
	width: 100%;
}

.hero-inner .card {
	opacity: 0;
	width: 35vw; 
}

.hero-holder-top {
	height: 11rem; /*100px + 4.75rem;;*/
}

.hero-holder-bottom {
	width: 35vw;	 
}

.bg-cross {
    background:
        linear-gradient(-90deg, rgba(var(--bs-info-rgb), .05) 0px, transparent 0px),
        linear-gradient(rgba(var(--bs-info-rgb), .05) 0px, transparent 0px), 
        linear-gradient(-90deg, rgba(var(--bs-info-rgb), .04) 1px, transparent 1px),
        linear-gradient(rgba(var(--bs-info-rgb), .04) 1px, transparent 1px),
        linear-gradient(transparent 5px, var(--bs-body-bg) 5px, var(--bs-body-bg) 156px, transparent 156px),
        linear-gradient(-90deg, var(--bs-info) 1px, transparent 1px),
        linear-gradient(-90deg, transparent 5px, var(--bs-body-bg) 5px, var(--bs-body-bg) 156px, transparent 156px),
        linear-gradient(var(--bs-info) 1px, transparent 1px),
        var(--bs-body-bg);
    background-size:
        8px 8px,
        8px 8px,
        160px 160px,
        160px 160px,
        160px 160px,
        160px 160px,
        160px 160px,
        160px 160px;
}

@media (min-width: 768px) {

	.hero-inner .card {
		opacity: 1;
		width: 250px;
	}
	
	.hero-holder-top {
		height: 150px;
	}
	
	.hero-holder-bottom {
		width: 250px;
	}
}


/* INTRO */

/*.spacer {
	width: 100vw;
	height: 100vh;
	background-color: #212121;
}*/

.intro-wrapper {
	/*background-color: rgba(255, 255, 255, 0.025);*/
	align-items: center;
	display: flex;
	min-height: 100vh;
	justify-content: center;
	padding: 2rem 0;
	/*width: 100%;*/
}

.intro-wrapper p {
	color: #7f7f7f;
	font-size: clamp(2rem, 4vw, 4rem);
}


@media (min-width: 1200px) {
	
	/*.intro-wrapper {
		padding-left: 25rem;
		padding-right: 25rem;
	}*/
}

@media (min-width: 1400px) {
	
	.intro-wrapper {
		/* width: clamp(87.5rem, 90vw, 128rem);*/
		min-width: 87.5rem;
		width: 69vw;
		max-width: 128rem;
	}
}


/* KNOWLEDGE */

.ul-knowledge .card-icon img {
	height: 5rem;
}


/* MONITORING */

.citymap { 
 /*display: inline-block;
  margin: 1em auto;
  background-color: #000;*/
	position: relative;
	width: 100%;
	z-index: 0;
}

.citymap img {
	/*background-color: rgba(255, 212, 19, 0.1);*/
  display: block;
 /* width: 100%;
  height: 100%;
max-width: 100%;
	z-index: 1;*/
}

.chart-pin {
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  transform: translateX(-50%) translateY(0);
  transition: all 0.3s ease;
  /*background-color: rgba(var(--bs-info-rgb), 1);*/
  border-radius: 50%;
	z-index: 2;
}

.chart-pin:hover {
  cursor: pointer;
  transform: translateX(-50%) scale(1.5);
  transform-origin: 50% 50%;
}

.pin-invest {
	bottom: 44%;
	left: 27.5%;
}

.pin-control {
	bottom: 58.50%;
	left: 67.5%;
}

@media (min-width: 768px) {
	
	.pin-invest {
		bottom: 48.5%;
	}

	.pin-control {
		bottom: 62%;
	}
}

@media (min-width: 1200px) {

	.chart-pin {
		height: 20px;
		width: 20px;
	}
}

.beat {
  /*box-shadow: 0 0 0 rgba(var(--bs-info-rgb), .4);*/
  -webkit-animation: beat 2s infinite;
          animation: beat 2s infinite;
}

.pin-control.beat {
  /*box-shadow: 0 0 0 rgba(var(--bs-warning-rgb), .4);*/
  -webkit-animation: beatcontrol 2s infinite;
          animation: beatcontrol 2s infinite;
}

/*.beat:hover {
  -webkit-animation: none;
          animation: none;
}*/

/*@-webkit-keyframes beat {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(239, 123, 0, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(239, 123, 0, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(239, 123, 0, 0);
  }
}*/
@keyframes beat {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-info-rgb), 0.4);
  }
  70% {
    box-shadow: 0 0 0 30px rgba(var(--bs-info-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--bs-info-rgb), 0);
  }
}

@keyframes beatcontrol {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--bs-warning-rgb), 0.4);
  }
  70% {
    box-shadow: 0 0 0 30px rgba(var(--bs-warning-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--bs-warning-rgb), 0);
  }
}


/* TOOLTIP */

.xtip h3 {
  font-size: 1rem;
  margin-top: 0.2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #C0D028;
  color: #C0D028;
}

.xtip p {
  font-size: 0.6rem;
	line-height: 1.5;
	margin-bottom: 0;
}

.xtip .top {
  min-width: 150px;
  top: -20px;
  left: 50%;
  transform: translate(-50%, -100%);
  padding: 10px;
  color: #444444;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 3px;
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);

  opacity: 0;
  transition: opacity 0.8s;
  visibility: hidden;
}

.xtip:hover .top {
	visibility: visible;
	opacity: 1;
}

.xtip .top i {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -12px;
  width: 24px;
  height: 12px;
  overflow: hidden;
}

.xtip .top i::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: #eeeeee;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}


/* IDEAS */

.ul-ideas .ideas-number {
	min-width: 2.5rem;
}

@media (min-width: 768px) {
	
	.ul-ideas .ideas-number {
		min-width: 3.5rem;
	}
}

@media (min-width: 1200px) {
	
	.ul-ideas .ideas-number {
		min-width: 4.75rem;
	}
}


/* TOOLS */

.ul-tools .card-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	-moz-column-gap: 1.5rem;
	column-gap: 1.5rem;
	row-gap: 1.5rem;
}

@media (min-width: 600px) {
	
	.ul-tools .card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	
	.ul-tools .card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*
.ul-tools .card-body {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem 1.25rem;
}*/

.ul-tools .card-body img {
  width: 40px;
  height: 40px;

  /*display: inline-flex;
  align-items: center;
  justify-content: center;*/
}

.ul-tools .card.card-plus {
	border: var(--bs-card-border-width) dashed var(--bs-card-border-color);
}

.ul-tools .card.card-plus .card-body {
	display: inline-grid;
	place-content: center;
}

@media (max-width: 1199px) {
	
	.ul-tools .card.card-plus {
		height: 5rem;
	}
}

@media (max-width: 991px) {
	
	.ul-tools .card.card-plus {
		height: 4.75rem;
	}
}

@media (max-width: 599px) {
	
	.ul-tools .card.card-plus {
		height: 4.625rem;
	}
}

@media (min-width: 1200px) {
	
	.ul-tools .fun-text {
		margin-left: -2.5rem;
	}
}


/* COMMUNICATION */

.communicator {
	height: 50vh;
}

.communicator img {
	bottom: 0;
	height: 47.5vh;
	right: -6.25rem;
}

@media (min-width: 1200px) {

	.communicator img {
		right: 6.25rem;
	}
}


/* CUP */

.cup-item {
	height: 6.5rem; 
	position: relative;
	width: 100px;
}

.cup {
  background: #231f20;
  border: 2px solid var(--bs-body-color);
  position: absolute;
}

.handle {
  background: transparent;
  border: 2px solid var(--bs-body-color);
  border-radius: 60% 30%;
  height: 20px;
  left: 90%;
  position: absolute;
  top: 10%;
  width: 15px;
  z-index: -1;
}

.cup-grande {
  width: 55px;
  height: 40px;
  border-radius: 0 0 5rem 5rem;
  margin: 23px;
}

.cup-tilde {
	/*background: rgba(178, 250, 255, 0.3);*/
	font-size: 10.5rem;
	height: 100%;
	line-height: 1;
	position: absolute;
	right: -23.5%;
	top: 0;
}

.cup-number {
	font-size: 6.5rem;
}

.chocolatemilk {
	background: linear-gradient(to bottom, #ffd6b0 45%, #643718 45%);
}

@media (min-width: 1200px) {
	
	.cup-item {
		height: 13.5rem; 
	}
	
	.cup-grande {
		height: 50px;
		width: 70px;
		border-radius: 0 0 5rem 5rem;
	}
	
	.cup-tilde {
		font-size: 13.5rem;
		right: -30%;
		top: 37.5%;
	}
	
	.cup-number {
		font-size: 13.5rem;
	}
}


/* TIMELINE }*/

.list-timeline:before {
  width: 1px;
  background: var(--bs-info);
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  height: 100%;
  content: '';
}

.list-timeline .list-timeline-item:before {
	width: 12px;
	height: 12px;
	background: var(--bs-body-bg);
	border: 2px solid var(--bs-info);
	position: absolute;
	left: 0;
	top: 2.125rem;
	content: '';
	border-radius: 100%;
	-webkit-transition: all .3 ease-in-out;
	transition: all .3 ease-in-out;
}

.list-timeline .list-timeline-item.active:before {
	background: var(--bs-info);
}

@media (min-width: 1200px) {
	
	.list-timeline .list-timeline-item:before {
		top: 2.75rem;
	}
}
	


/* #Plugins
================================================== */

/* SCROLL */

/*.scroll-wrapper {
	align-items: end;
	display: flex;
	justify-content: center;
}*/

.scroll-indicator {
	background: var(--bs-body-bg);
  width: 40px;
  height: 60px;
  border: 2px solid rgba(178, 250, 255, 0.781);
  border-radius: 50px;
  position: relative;
  /*box-shadow: 0px 0px 35px -5px rgba(109, 245, 222, 0.781);*/
}

.scroll-indicator::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: rgba(203, 248, 251, 0.781);
  border-radius: 50%;
  transform: translate(-50%, 0);
  animation: scrollAnim 1.8s 0.5s infinite ease-in;
  /*box-shadow: 0px 0px 35px -5px rgba(70, 255, 224, 0.781);*/
}

@keyframes scrollAnim {
  0% {
    transform: translate(-50%, 0) rotateX(0);
    opacity: 0;
  }

  5% {
    opacity: 0.5;
  }

  15% {
    opacity: 1;
  }

  90%,
  100% {
    opacity: 0;
  }

  100% {
    transform: translate(-50%, 30px) rotateX(30deg);
  }
}

@media (max-width: 767px) {
	
	.scroll-indicator,
		.scroll-indicator::before {
	  /*height: 0;
	  width: 0;	
			display: none;*/
	}
}


/* NETWORK */

.button {
  display: inline-block;
  padding: 10px 16px;
  font-weight: 400;
	line-height: 1;
  margin-bottom: 10px;
  background: #eee;
  border: none;
  /*border-radius: 7px;
  background-image: linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0),
    hsla(0, 0%, 0%, 0.2)
  );*/
  color: #222;
  /*font-family: sans-serif;*/
  font-size: 1rem;
  /*text-shadow: 0 1px white;*/
  cursor: pointer;
}

.button:hover {
  background-color: #8cf;
  /*text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);*/
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28f;
}

.button.is-checked {
  color: white;
  /*text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);*/
}

.button:active {
 /* box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);*/
}

.button-group:after {
  content: "";
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 8px;
}

.element-grid:after {
	content: "";
	clear: both;
	display: block;
}

.element-item {
	background: var(--bs-gray-400);
	color: var(--bs-dark);
	float: left;
	height: 28vw;
	margin-bottom: .75rem;
	margin-right: .75rem;
	padding: 0.625rem;
	position: relative;
	width: 28vw;
}

@media (min-width: 576px) {
	
	.element-item {
		height: 7.25rem;
		width: 7.25rem;
	}	
}

.element-item > * {
	margin: 0;
	padding: 0;
}

.element-item .name {
	font-size: 1rem;
	font-weight: normal;
	left: 0.625rem;
	letter-spacing: 0;
	text-transform: none;
	position: absolute;
	top: 2.5rem;
	z-index: 1;
}

.element-item .first-name {
	font-size: 0.75rem;
	font-weight: normal;
	left: 0.625rem;
	letter-spacing: 0;
	text-transform: none;
	position: absolute;
	top: 3.5rem;
}

.element-item .number {
	color: white;
	font-size: 2.625rem;
	font-weight: bold;
	left: 0.625rem;
	opacity: .25;
	position: absolute;
	top: 0;
}

.element-item .symbol {
	font-size: 1rem;
	position: absolute;
	right: 0.5rem;
	top: 0.25rem;
	
}

.element-item .weight {
	font-size: 0.75rem;
	left: 0.625rem;
	position: absolute;
	top: 5rem;
}

.element-item.bildung {
	background: #f80;
	background: hsl(36, 100%, 50%);
}

.element-item.kultur {
	background: var(--bs-warning);
}

.element-item.politik {
	background: #c0f;
	background: hsl(288, 100%, 50%);
}

.element-item.umwelt {
	background: #0f0;
	background: hsl(108, 100%, 50%);
}

.element-item.verwaltung {
	background: var(--bs-info);
}

.element-item.wirtschaft {
	background: #f08;
	background: hsl(324, 100%, 50%);
}


/* CHAT */

:root,
[data-bs-theme=light] {
  --primary-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
  --secondary-gradient: linear-gradient(135deg, #f472b6, #db2777);
  --bg-color: #ffffff;
  --chat-bg: #f8fafc;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --bot-message-bg: #f1f5f9;
  --user-message-bg: #818cf8;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bg-color: #0f172a;
  --chat-bg: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --bot-message-bg: #334155;
  --user-message-bg: #6366f1;
  --border-color: #334155;
}

/*.container {
  max-width: 1000px;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background-color: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.header-title {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-title h1 {
  font-size: 1.5rem;
  font-weight: 600;
}*/

.bot-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/*.controls {
  display: flex;
  gap: 1rem;
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 1.25rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background-color: var(--bot-message-bg);
}*/

.chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 0;
  /*background-color: var(--chat-bg);*/
  scroll-behavior: smooth;
}

.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(20px);
  animation: messageAppear 0.5s ease forwards;
}

@keyframes messageAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-right: 1rem;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  box-shadow: var(--shadow-md);
}

.user-message .avatar {
  background: var(--secondary-gradient);
}

.message-bubble {
  max-width: 70%;
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
  line-height: 1.5;
  position: relative;
}

.bot-message .message-bubble {
  background-color: var(--bot-message-bg);
  border-top-left-radius: 0;
}

.user-message {
  flex-direction: row-reverse;
}

.user-message .avatar {
  margin-right: 0;
  margin-left: 1rem;
}

.user-message .message-bubble {
  background: var(--user-message-bg);
  color: white;
  border-top-right-radius: 0;
}

.typing-indicator {
  display: none;
  padding: 1rem 1.5rem;
  background-color: var(--bot-message-bg);
  border-radius: 1rem;
  width: fit-content;
  margin-left: 3.5rem;
  box-shadow: var(--shadow-sm);
}

.typing-dots {
  display: flex;
  gap: 0.4rem;
}

.typing-dot {
  width: 8px;
  height: 8px;
  background-color: var(--text-secondary);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}
.typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typingBounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/*.input-container {
  padding: 1.5rem;
  background-color: var(--bg-color);
  border-top: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
}*/

.input-wrapper {
	background-color: var(--chat-bg);
	box-shadow: var(--shadow-sm);
	display: flex;
	gap: 0; /*1rem;*/
	padding: 0.5rem;
}

.message-input { 
	background: none;
	border: none;
	color: var(--text-primary);
	flex: 1;
	font-size: 1rem;
	padding: 0.75rem 0;
	width: 100%;
}

.message-input:focus {
  outline: none;
}

.message-input::placeholder {
  color: var(--text-secondary);
}

.action-buttons {
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem;
}

.action-button {
	background: none;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	display: inline-grid;
	height: 3.375rem;
	min-width: 3.375rem;
	padding: 0;
	place-content: center;
	transition: all 0.3s ease;
}

.action-button:hover {
	background-color: var(--bot-message-bg);
	color: var(--text-primary);
}

.send-button {
	align-items: center;
	/*background: var(--primary-gradient);*/
	border: none;
	color: white;
	/*cursor: pointer;*/
	display: flex;
	/*font-weight: 500;*/
	gap: 0.5rem;
	height: 3.375rem;
	min-width: 3.375rem;
	padding: 0;
	place-content: center;
	transition: all 0.3s ease;
}

.send-button:hover {
	opacity: 0.7;
	/*transform: translateY(-1px);*/
}

@media (max-width: 767px) {
	
  /*.container {
    height: 100dvh;
  }

  .header-title h1 {
    font-size: 1.25rem;
  }*/

 /* .chat-container {
    padding: 1rem;
  }*/

	.message-bubble {
		max-width: 85%;
	}

 /* .input-container {
    padding: 1rem;
  }*/
	
	.action-button,
		.send-button {
		height: 2.25rem;
		min-width: 2.25rem;
	}
}


/* SWIPER CAROUSEL */

.loc-swiper {
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		white 10%,
		white 90%,
		transparent 100%
	);
}

.loc-swiper .swiper-wrapper {
	align-items: center;
	transition-timing-function: linear;
}

.loc-swiper .swiper-slide {
	align-items: center;
	display: flex;
	justify-content: center;
	min-width: 12rem;
	width: auto; /*12rem*/
}



/* #Media Queries
================================================== */

@media (max-width: 575px) {}
@media (min-width: 576px) {} 	
@media (min-width: 576px) and (max-width: 767px) {}
@media (max-width: 767px) {}
@media (min-width: 768px) {}
@media (min-width: 768px) and (max-width: 991px) {}
@media (max-width: 991px) {}
@media (min-width: 992px) {}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (max-width: 1199px) {}
@media (min-width: 1200px) {}
@media only screen and (min-width: 1200px) {}



/* #Print Styles
================================================== */

@page {
	size: A4;
	margin-top: 50px;
	margin-right: 20px;
	margin-left: 20px;
}

@media print {
	
    html, body {
        width: 210mm;
    /*height: 297mm;*/;
    }

    a[href]:after {
        content: none;
    }

    .hero,
  	#footer {
        display: none;
    }

    main {
        margin: 0;
        padding: 0;
    }
}