@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background-color: #111; /* dunkler Hintergrund */
}

::-webkit-scrollbar-thumb {
  background-color: #fff; /* heller Balken */
  border-radius: 6px;
  border: 2px solid #111; /* optional: Abstand durch Rahmen */
}

::-webkit-scrollbar-button {
  background-color: #fff; /* Pfeile, wenn aktiv */
  height: 0; /* oder 12px wenn du sie sehen willst */
}

::-webkit-scrollbar-track {
  background-color: #111; /* Hintergrund des Scrollbereichs */
}

body{
	transition: transform 0.2s ease;
    will-change: transform;
}


/* ===== Buttons ===== */
.button {
  display: block;
  text-align: center;
  	
  font-size: 1.2em;
  padding: 0.4em 0 0.4em 0;
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: none;
}
.button:hover{
	background-color:#80808080;
}

.button.active {
  background-color: #103060; /* dunkles, sattes Blau */
  color: white; /* kühles, helles Blau */

  box-shadow:
    0 0 0.8em rgba(80, 160, 255, 0.3),       /* außen */
    inset 0 0 0.5em rgba(100, 180, 255, 0.25); /* innen */

  text-shadow: 0 0 0.5em rgba(150, 200, 255, 0.6); /* leuchtet deutlicher */

  border-radius: 0;
  transition: all 0.3s ease;
}


/* ===== Buttons / BookPaging ===== */

.panelBookPaging{
	width:100%;
}

.panelBookPagingInner{
	max-width:1200px;
	margin:auto;
	padding:1em;
	
	display: flex;
    justify-content: center;
    gap: 1em;
}
.panelBookPaging .button {

    font-size: 1.1em;        /* gut lesbar auf Mobil */
    padding: 0.75em 1.25em;   /* große Touchfläche */
    min-width: 44px;          /* WCAG-Empfehlung */
    
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    color: #333;
    text-decoration: none;

    transition: background 0.2s ease;
}

.panelBookPaging .button:hover {
    background: #eaeaea;
}


/* ===== generics ===== */

.hidden{
	display:none;
}
.alignLeft{
	text-align:left;
}
.alignCenter{
	text-align:center;
}
.alignRight{
	text-align:right;
}

.sticky{
	position: sticky;
	top: 0;
	z-index: 10;
}

.frosted{
	background-color:#000000CC;
	color:white;
}

.smokeglass{
	background-color:#000000CC;
	color:white;
}