/*
		static/css/base.css
		===================

		MH, 05.22, 03.23, 06.25
*/

/* Works on Firefox */

/*
* {
	scrollbar-width: thin;
	scrollbar-color: blue orange;
  }
  
  /* Works on Chrome, Edge, and Safari 
  *::-webkit-scrollbar {
	width: 12px;
  }
  
  *::-webkit-scrollbar-track {
	background: orange;
  }
  
  *::-webkit-scrollbar-thumb {
	background-color: blue;
	border-radius: 20px;
	border: 3px solid orange;
  }
*/

@font-face {
    font-family: 'Liberation Mono';
    src: url('../font/LiberationMono.eot');
    src: local('Liberation Mono'), local('LiberationMono'),
        url('../font/LiberationMono.woff2') format('woff2'),
        url('../font/LiberationMono.woff') format('woff'),
        url('../font/LiberationMono.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Liberation Mono';
    src: url('../font/LiberationMono-Bold.eot');
    src: local('Liberation Mono Bold'), local('LiberationMono-Bold'),
        url('../font/LiberationMono-Bold.woff2') format('woff2'),
        url('../font/LiberationMono-Bold.woff') format('woff'),
        url('../font/LiberationMono-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

time {
	position: relative;
	cursor: default;
}

a time {
	cursor: pointer;
}

li:has(a.selected) {
	cursor: not-allowed;
}

time+time::before {
	content: '\00A0-\00A0';
}

html {
	overflow-y: scroll;
	max-width: 100vw;
}

body {
	background-color: white;
	font-family: Arial, sans-serif;
	color: #152032;
	height: auto;
	min-height: 100vh;
	position: relative;
	transition: top 1s, filter 3s;
}

code,
pre {
	display: inline;
	font: inherit;
	/* für Markdown */
}

h1 {
	font-size: 22px;
}

h3 {
	font-size: 19px;
	line-height: 1.1em;
	/* margin-bottom: 8px; */
	color: #2a5880;
}

main>h2 {
	margin-top: 24px;
}

main>div:first-child {
	margin-top: 20px;
}

h1,
h2,
h3 {
	margin: 1em 0 1em;
}

div>h1:first-child {
	margin-top: 0;
}

a {
	text-decoration: none;
	/*word-break:break-all;*/
	overflow-wrap: break-word;
}

figure {
	width: fit-content;
	margin-bottom: 1em;
}

time~figure {
	margin-top: 1em;
}

iframe {
	border: none;
	max-width: 100vw;
}

a {
	transition: color .3s;
}

a,
a:visited {
	color: inherit;
}

a.active {
	text-decoration: none;
	color: #2a5880;
}

main {
	grid-area: main;
}

* {
	grid-column-start: 2;
	grid-column-end: span 2;
	justify-self: auto;
}

a:hover,
.mail:hover {
	color: #0072b7;
}

.sidebar {
	font: normal normal 400 17px/26px "Arial", sans-serif;
	width: 275px;
	height: calc(100% - 8px);
	/* verhindert Flackern */
	margin-top: 8px;
	margin-right: 10px;
	grid-area: aside;
	justify-self: end;
}

.sidebar~main {
	grid-area: main;
	justify-self: start;
	max-width: 1200px;
}

.regattas .sidebar,
.news .sidebar {
	width: 275px;
}

.news main {
	width: calc(100vw - 285px);
}

#content {
	display: grid;
	position: relative;
	grid-template-columns: auto auto;
	grid-template-rows: auto min-content;
	grid-template-areas: 'aside main' 'footer footer';
	grid-row-gap: 10px;
	/* width: 1485px; */
	width: 100%;
	min-height: calc(100vh - 73px - 1px - 2px);
	/* margin-top: 8px; */
	transition: top .5s linear 1s;
	overflow-x: clip;
}

#content.home {
	display: block;
}

#content main:first-child {
	grid-column-start: aside;
	grid-column-end: main;
	justify-self: center;
	/* width:1200px; */
	max-width: 1200px;
}

#content.home main {
	max-width: 100vw;
}

.home#content main:first-child {
	display: flex;
	width: 100%;
}

.sidebar .linklist {
	background-color: #f2f2f2;
	overflow-y: auto;
	width: inherit;
	height: 100%;
	padding: 0 4px;
	scrollbar-gutter: stable;
	/* scrollbar-color: #2a5880 gainsboro;	*/
}

#content img {
	visibility: hidden;
	display: block;
}

/*

*::-webkit-scrollbar-track {
	background: gainsboro;
}
  
*::-webkit-scrollbar-thumb {
	background-color: #2a5880;
	border-radius: 20px;
	border: 3px solid orange;
}

*::-webkit-scrollbar {
	width: 12px;
  }
*/

.sidebar a {
	display: block;
	padding: 3px 10px;
}

.sidebar>ul {
	padding-right: 10px;
}

.sidebar li {
	cursor: not-allowed;
}

a.selected {
	text-decoration: underline;
	color: #2a5880;
	pointer-events: none;
}

a time {
	margin: 0;
}

.sidebar a.selected {
	border: 2px solid #2a5880;
	text-decoration: none;
}

@media screen and (hover:hover) {

	.sidebar a {
		border: 2px solid transparent;
	}

	.sidebar a:hover {
		border: 2px dashed #2a5880;
	}
}

.ns-only {
	display: none;
}

.js-info {
	color: darkred;
}

.selectable {
	width: 100%;
}

.selectable,
.selectable * {

	user-select: text;
}

.display-none {
	display: none;
}

.load-notice {
	position: absolute;
	background-color: #fbfbfb;
	z-index: 10;
}

time.monospace {
	font-family: 'Courier New', Courier, monospace;
	font-weight: bold;
}

.submenu time.monospace {
	font-family: 'Liberation Mono', monospace;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
}

.ff_monospace {
	font-family: 'Courier New', Courier, monospace;
}

.fw_bold {
	font-weight: bold;
}

.mail {
	display: table;
}

p {
	margin-top: 1em;
	margin-bottom: 1em;
}

p:last-child {
	margin-bottom: 0;
}

p>.mail {
	display: inline;
}

.mail-placeholder {
	display: table-cell;
}

time,
.event time {
	color: #697b91;
	font-size: 16px;
}

.sidebar time,
.tile time {
	color: #697b91;
}

time[class*="icon"]::before {
	font-size: .95em;
	padding-bottom: 1px;
	margin-right: 0.25em;
	margin-left: -0.03em;
}

.markdown time {
	display: inline-block;
	margin-top: 1em;
}

.icon-mail::before {
	margin-right: .3em;
	font-size: .95em;
}

#scroll-area img {
	visibility: hidden;
}

.disconnected {
	display: none;
	margin: 0 20px 0 1px;
	color: red;
	font-size: 15px;
	position: absolute !important;
	right: 0;
	bottom: 0;
}

figcaption {
	font-size: .8em;
	text-align: center;
	color: #2a5880;
}

.pos-right {
	margin-left: auto;
}

.pos-float-right {
	float: right;
	margin-left: 1em;
}

.pos-float-left {
	float: left;
	margin-right: 1em;
}

.pos-center {
	margin-left: auto;
	margin-right: auto;
}

.render-image {
	margin-bottom: 1em;
}

.render-image.float-left {
	float: left;
	margin-right: 1em;
}

.render-image.float-right {
	float: right;
	margin-left: 1em;
}

@media screen and (hover:hover) {

	a.selected {
		color: #2a5880;
	}
}

main>div:first-of-type>h1:first-child:not(.nav-heading) {
	margin-top: 0;
}

img~.markdown {
	margin-top: 1em;
}

.markdown li {
	margin-bottom: .4em;
}

.markdown ul.no-style {
	list-style: none;
}

.markdown ul.no-style > li > ul {
	list-style: disc;
}

.markdown ul:not(.no-style) {
	padding-left: 1.5ch;
}

.markdown h1 {
	font-size: 22px;
}

.markdown ul,
.markdown ol {
	margin-top: 1em;
	margin-bottom: 1em;
}

.markdown ol {
	margin-left: 1em;
}

.markdown>ul[style*="list-style"] {
	padding-left: 0;
}

.markdown aside h1 {
	text-decoration: none;
	color: black;
}

.markdown h2~h1 {
	margin-top: 1em;
}

.markdown h1.type {
	font-size: 25px;
	color: black;
}

.markdown h1:not(.nav-heading),
.markdown h2 {
	color: #2a5880;
}

.markdown .hidden-text h1:first-of-type {
	margin: 0em 0 1em 0;
	color: #2a5880;
}

.markdown h2 {
	font-size: 20px;
	line-height: 1.1em;
}

.markdown h2+h2 {
	margin: 1.5em 0 0 0;
}

.markdown hr {
	margin: 2em 0 2em 0;
	border: 0;
	border-bottom: 1px solid black;
}

.link-button~.markdown {
	margin-top: 20px;
}

.img-link-button {
	margin: 20px 0;
}

/*
.markdown.selectable {
	padding: 0;
}
*/

.markdown div.hidden-text>h1:first-of-type {
	padding-top: 1em;
	clear: both;
}

main {
	padding-left: 4px;
	padding-right: 4px;
}

main.markdown {
	display: block;
	/* max-width: 100%; */
}

.markdown.contacts {
	flex-direction: column;
}

.markdown>p:first-child {
	margin-top: 0;
	margin-bottom: 0;
}

/*
.markdown > div:only-child {
	margin: 5px auto;
}
*/

.markdown:not(.news-item-container) img {
	align-self: center;
	width: auto;
	height: auto;
	max-width: 100%;
}

.markdown .sidebar {
	border-right: 1px solid black;
	border-color: #2a5880;
	min-width: 25%;
	padding-right: 1em;
	margin-right: 2em;
	hyphens: auto;
}

.sidebar .linlkist {
	list-style-type: square;
}

.sidebar .linklist>li {
	list-style-type: square;
}

.markdown a {
	text-decoration: underline;
	word-break: break-word;
}

.markdown a.icon-phone,
.markdown a.icon-mobile,
.markdown a.link-button {
	text-decoration: none;
}

.markdown h1+h2,
.markdown h2+p {
	margin-top: 0;
}

.markdown.event h1~h2 {
	font-size: 20px;
	line-height: 1.1em;
	margin-top: 1em;
}

.markdown figure~h2 {
	margin-top: 20px;
}

@media screen and (max-width: 395px) {
	.markdown .sidebar {
		margin-right: 4px;
	}
}

/* Gastronomie */

.opening-hours {
	display: flex;
	width: 100%;
	margin-bottom: 3em;
}

@media screen and (max-width: 380px) {
	.opening-hours {
		flex-direction: column;
	}
}

/* Ende: Gastronomie */