/* pt-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('css/fonts/pt-sans-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* pt-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('css/fonts/pt-sans-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
  --hk-lila: #826bbd;
  --hk-lila-rgb: 130,107,189;
  --hk-footer: #c4c4c4;
  --hk-lila-dark: #5b4498;
  --hk-gray: #eaeaea;
  --hk-gray-dark: #4a4a4a;
  
  --hk-body-font-family: "PT Sans",arial,helvetica,sans-serif;
  --hk-body-font-size: "18px";
  --hk-headline-font-family: "PT Sans",arial,helvetica,sans-serif;
}

* {
  scrollbar-color: #bbb #ddd;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #ddd;
}

::-webkit-scrollbar-thumb {
  border: none;
  border-radius: 4px;
  background-color: #bbb;
}

body {
	font-family: var(--hk-body-font-family);
    color: #777777;
	font-size: 15px;
	min-width: 340px;
}
h1, h2, h3 {
  color: var(--hk-gray-dark);
  margin-bottom: 18px;
}
h1 {
	font-size: 30px;
}
h2 {
	font-size: 24px;
  	color: var(--hk-lila);
}
h3 {
	margin-top: 0;
	font-size: 18px;
	line-height: 22px;
  	color: var(--hk-lila);
}
a {
	color: var(--hk-lila);
	text-decoration: none;
}
a:hover {
	color: var(--hk-lila-dark);
	text-decoration: underline;
}
img {
	width: 100%;
}

/* Navigation */
.topbar {
	font-size: 15px;
  	margin: 0 0 11px;
  	margin-top: 20px;
}

.navbar {
	background-color: var(--hk-lila);
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
}

.navbar-nav .nav-link {
	-webkit-transition: all 250ms ease;
	-moz-transition: all 250ms ease;
	-ms-transition: all 250ms ease;
	-o-transition: all 250ms ease;
	transition: all 250ms ease;
	font-size: 17px;
	line-height: 24px;
	padding: 11px 12px !important;
	color: #fff !important;
}

ul.navbar-nav > li > .nav-link.active {
  background-color: #715aac;
}

ul.navbar-nav > li > a:hover {
  background-color: #937cce;
  text-decoration: none;
}

.navbar-toggler {
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border-radius: 0;
  transition: box-shadow .15s ease-in-out;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible {
	box-shadow: none;
	background-color: #715aac;
}

.dropdown-menu {
  color: white;
  background-color: var(--hk-lila);
  border: 0px solid rgba(0,0,0,.15);
  padding: .5rem;
  border-radius: 0;
}

.dropdown-menu a {
  color: white;
}

/* General */
.container {
  margin: 0 auto;
  max-width: 980px !important;
}

.card img {
	max-height: 200px;
	width: 100%;
	display: block;
	object-fit: cover;
	display: block;
}

.kontakt.card {
	background-color: rgba(0,0,0,0.05);
	border-radius: 0;
	border-width: 0;
}
.card img {
	max-height: 200px;
	width: 100%;
	display: block;
	object-fit: cover;
	display: block;
}

.btn {
	background-color: var(--hk-lila);
	color: white;
}

a.btn:hover {
	background-color: var(--hk-gray-dark);
	color: white;
	text-decoration: none;
}

/* Special */
.logo {
	height: 70px;
}

.zitat {
  position: static;
  display: block;
  max-width: 100%;
  padding: 15px 15px 15px 80px;
  margin: 0;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.4;
  text-align: left;
  font-style: italic;
  text-align: center;
  background: rgba(0,0,0,0.05) url('img/zitat.png') no-repeat left top;
}

.zitat span {
	font-size: 18px;
}

.google {
	position: absolute;
	font-size: 14px;
	right: 0;
	top:200px;
	background-color: #eee;
	width: 200px;
	text-align: center;
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
}

.google a {
	color: black;
}
.google a:hover {
	text-decoration: none;
	color: var(--hk-lila);
}

.google span,
.googlestars {
	color: #ff0;
	font-size: 20px;
	text-shadow: 1px 1px 2px black;
}

/* Carousel */
.carousel-caption {
  left: 15px ;
  right: auto;
  padding: 20px;
  font-size: 30px;
  background-color: rgba(var(--hk-lila-rgb), 0.8);
}

.section-title {
	color: var(--hk-lila);
}

.portrait {
	padding: 4px;
	line-height: 1.5;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 0;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	display: inline-block;
	max-width: 100%;
	height: auto;
}

footer {
  	background-color: var(--hk-footer) ;
  	border-top: 4px solid var(--hk-gray);
	font-size: 13px;
	color: white;
	padding: 20px 0;
}
footer p{
	color: #444;
}

.bullet-list {
  padding-left: 2px;
}

.bullet-list li {
  position: relative;
  padding-left: 1.3em;
}

.bullet-list li::before {
  content: "■";
  position: absolute;
  left: 0;
  color: #7e5cb7;
}

.scrollup {
  position: fixed;
  width: 36px;
  height: 36px;
  bottom: 20px;
  right: 0;
  outline: 0;
  z-index: 30;
  text-decoration: none;
  background: var(--hk-lila);
  text-align: center;
  color: #fff;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  border-radius: 3px 0 0 3px;
}

/* Modal mit Slider */
.modal.fade .modal-dialog {
transition: transform 0.15s ease-out !important;
}
.modal.fade.show .modal-dialog {
transform: translateY(0);
}
.modal.fade .modal-backdrop {
transition: opacity 0.15s linear !important;
}

.modal-body {
	padding: 0 2rem 2rem;
}
.gallery-img {
width: 150px;
height: auto;
cursor: pointer;
transition: transform 0.2s;
}

.gallery-img:hover {
transform: scale(1.05);
}

.modal-img {
max-width: 100%;
height: auto;
display: block;
margin: auto;
}

.modal-content {
opacity: 1;
transition: opacity 2s ease; /* Standard-Fade für Bildwechsel */
}

.modal-content.fade-out {
opacity: 0;
}

.modal-content.instant {
transition: opacity 0.15s ease !important; /* Schneller Übergang beim ersten Öffnen */
}

.nav-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 0.5rem 1rem;
border: none;
z-index: 10;
}

.nav-arrow.left {
left: 10px;
}

.nav-arrow.right {
right: 10px;
}