/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,900&family=Vollkorn:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */

/* vollkorn-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: 'Vollkorn';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/vollkorn-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* vollkorn-italic - 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: 'Vollkorn';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/vollkorn-v30-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* vollkorn-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: 'Vollkorn';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/vollkorn-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* vollkorn-700italic - 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: 'Vollkorn';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/vollkorn-v30-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900italic - 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: 'Roboto';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/roboto-v51-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


html {
  font-size: 100%;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  font-size: 1.1rem;
  font-weight: normal;
  background-color: #404e4d;
  /* color: #404040; */
  line-height: 1.5;
  overflow-x: hidden;
}

.closed { display: none; }

body.noscroll { overflow: hidden; }
body a { text-decoration: none; }

.container {
	margin: 0 auto;
	max-width: 75rem;
	/*box-shadow: 0 0 1.5rem rgba(0,0,0,.75);*/
}

.header__hero {
	padding-top:0.5rem;
	background: url(ukj.svg) right 22%/27% no-repeat #c00;
	height:12rem;
	/* background: url(ukj.svg) right -52px/350px no-repeat #c00;
	background: #ffff84 url(./bilder/test.gif);
	text-align:center;
	display: grid;
	justify-content: center;
	align-items: center; */
}
.header__logo {
	margin:0 25%;
	height: 100%; /* 8rem; */
	background: url(yptitle.png) center center no-repeat;
	background-size: contain;
	/* width:100%;
	min-width:27.5rem;
	left: 50%;
    transform: translateX(-50%); */
}

.header__nav {
	font-family: 'Arial', sans-serif;
	list-style: none;
	margin: 0; 
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly; /* This aligns items to the end line on main-axis */
}
.header__links {
	background-color:#093871;
	/* padding: 1rem; */
	text-align:center;
}
.header__links a, .header__links a:visited {
	color: #fff;
	font-weight:bold;
	font-style:italic;
	position: relative;
	display: block;
	padding: 0.3rem 0;
	border: 0;
	transition:all 150ms ease-in-out; 
	border-radius: .15rem;
	/* cursor: pointer;
	padding-left: 0.25rem;
	background-color: #000;
	overflow: hidden;
	border-radius: .75rem; */
}
.header__links a:hover {
	color:#093871;
	background-color:#fff; /*#ffefd3;*/
	box-shadow: 0 .125rem .75rem rgba(0,0,0,.5);
	/*color:#ccc;
	background-color:#026; */ /* #093871; */
	transform: scale(1.2);
	/*position:relative;
	top:.25rem;*/
}
.header__links a:first-child {
	padding-left: 0.8rem;
	/*border-radius: 12px 0 0 12px;*/
}
.header__links a:last-child {
	padding-right: 0.8rem;
	/*border-radius: 0 12px 12px 0;*/
}
.header__links a:not(:last-child):after {
	/* content: " |"; */
}

@media only screen and (max-width: 767px) {
	body {
	  font-size: 1.25rem;
	}
	.header__hero {
		padding:.5rem;
		height:8rem; 
		background: #c00; /* url(ukj.svg) right 22%/27% no-repeat #c00; */
	}
	.header__nav {
		/* display:block !important;
		display:none !important; */
		flex-flow: column wrap;
		padding: 0;
	}
	.header__links a { 
		background: #0b4285;
		text-align: center; 
		margin-bottom: 3px;
		padding: 10px;
		/*border-top: 1px solid rgba(255, 255, 255,0.3); 
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
		border-radius: 0;
	}
	.header__links li {
		/*border-top: 1px solid rgba(255, 255, 255,0.3); 
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);*/
	}
	.header__links a:hover {
		color:white;
		background-color:#052868; /* #026 */
		transform: none;
		box-shadow: none;
	}
/*	.header__nav li:last-of-type a {
		margin-bottom: 0;
	}
*/
	.header__logo {
		margin: 0 .5rem 0 .5rem;
		height: 100%;
		background: url(yptitle.png) center center no-repeat;
		background-size: contain;
		/* min-width:27.5rem;
		left: 50%;
		transform: translateX(-50%); */
	}
}
.suchfeld  { 
	margin: 5px;
	background-color:#093871;
	color:#fff;
	border: 1px solid #fff;
	width:125px;
	font-family: Verdana,Arial,sans-serif;
	font-size:12px;
}

.main {
	min-height:12.5rem;
	background: #ffefd3;
	font-family:Vollkorn, serif;
	overflow:visible;
	/* background: url(ukj.svg) right  no-repeat #FFEFD3; */
}

.main h1,.main h2,.main h3,.main h4,.main h5,.main h6 {
	/*border-radius: 14px 14px 0 0;*/
	color:#093871; /* 0B4184; #AABD8C; */
	margin:0;
	font-family: roboto, arial, sans-serif;
	font-weight:bold;
	font-style:italic;
	/*background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
	text-shadow: 3px 3px 5px rgba(0,0,0,.25);
	/* text-shadow: -1px -1px 0 #c9a,
                 -1.5px -2px 0 #caa,
                 -2px -3px 0 #cbb,
                 1px 1px 0 #800,
                 1.5px 2px 0 #600,
                 2px 3px 0 #000;
	text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,0.5);
	background-color:#779CAB;
	padding: 0.5rem 1rem; */
}
.main h1 { font-size:3.25rem;  margin-bottom:1rem }
.main h2 { font-size:2.25rem; }
.main h3 { font-size:1.5rem; }
.main h4 { font-size:1.5rem; }

.main a, main a:visited { 
	color:#004191; /* 093871 */
	transition: all 150ms ease-in-out;
}
.main a:hover   { 
	color:#ffefd3;
	background-color:#093871;
/*	transform: scale(1.1); */
}

a.imglnk:hover     { background-color:transparent; }
a.imglnk:hover img { transform: scale(.95); transition:all 75ms ease-in-out; } /*1.05*/

/* eingerückt, OHNE Leerzeile nach dem Absatz */
.yp1 { text-indent:1rem; text-align:justify; margin: 0px; }
/* eingerückt, MIT Leerzeile nach dem Absatz */ 
.yp2 { text-indent:1rem; text-align:justify; }
/* NICHT eingerückt, MIT Leerzeile nach dem Absatz */
.yp3 { text-align:justify; }

#autor { font-style:italic; text-align:center; }
p.dots { font-weight:bold; font-size: 24pt; text-align:center; }
hr#ende { width:50%; margin: 20px auto 20px auto; text-align:center; border:0px; background-color:#000000; height:1px; }

.shadow { box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }
.center { text-align:center; }

img.left {
	float:left;
	margin-right:.75rem;
}
img.right {
	float:right;
	margin-left:.75rem;
}
img.top { vertical-align:text-top; }

.lbimg {
	display:flex;
	/*overflow:hidden;
	width:100%;*/
	/*max-width:45.5rem;*/
	justify-content:space-between;
	align-items:stretch;
	gap:1rem;
	flex-wrap:wrap;
	/*position:relative;*/
	padding:1rem 0;
}
	.lbimg a {
		/*display:block;*/
		height:7rem;
		flex:1 0;
		/*flex-basis:25%;*/
		transition:all 150ms ease-in-out;
	}
	.lbimg a img {
		/*height:7.5rem;*/
		border-radius:0.5rem;
		max-height: 100%;
		min-width: 100%;
		object-fit: cover;
		vertical-align: bottom;
		box-shadow: rgba(0, 0, 0, 0.3) .4rem .5rem .65rem -.2rem;
		/*max-height:7.5rem;*/
	}
	.lbimg a:hover {
		text-decoration:none;
		background:none;
		transform: scale(1.06);
	}
	/*.lbimg a:hover img { box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px; }*/

.bgoverlay {
    opacity: 0;
	visibility:hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background-color:rgba(0,0,0,.35);
    /*background-image: linear-gradient(#404e4d, transparent);*/
	z-index:1000;
 }
.showme {
    opacity: 1;
	visibility:visible;
}

.moreoverlay {
    position: absolute;
	/*height:100%;*/
    width:85%; /*calc(100% - 15rem);*/
    left: 50%; top: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #ffefd3;
    margin-top: 0rem;
    padding: 1.625rem;
    border-radius: .75rem;
	/*top:4rem;*/
	box-shadow: 4px 4px 18px rgba(0,0,0,.75);
	
/*	font-family: 'Arial', sans-serif;
	position:absolute;
	right:2rem;
	width:12rem;
	padding: 0.75rem;
	background-color: #fff;*/
}
	
#ausgabenbox { align-items:flex-start; }
/*#ausgabenbox a       { text-decoration: none; color:#00009C; }
#ausgabenbox a:hover { text-decoration: underline; }*/

.box {
	padding:2rem;
	/* flex:1 0 26rem;
	border: solid #ccc 1px; */
}
	.box__intro {
		/* flex:1 1 35rem;
		background: no-repeat right/33% fixed url(ukj2.svg);
		background-size:50%;*/
	}
	.box__quickchoice {
		position:sticky; /*relative;*/
		top:0;
		overflow:visible;
		/*float:right;*/
		/* flex:0 0 16.5rem;
		line-height:2.25; */
		z-index:100;
	}
	.box__center {
		width:66%;
		margin:0 auto;
	}
	.box__text {
		/*padding:1rem;
		color:#000;
		font-family:Vollkorn, serif;
		font-size: 1.1rem;
		font-weight: normal;
		line-height:1.5;*/
		/* background-color:#cc0000; */
	}
	.box__text ul {
		padding-left:1.25rem;
	}
	.box__info {
		box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
		margin:2rem auto !important;
		background:#fff; 
		xtext-align:left; 
		font-size:80%; 
		padding:1rem;
	}

	a.btnQuick, a.btnMore {
		/*position:sticky;
		right:0;
		top:50px;*/
		position:absolute;
		right:2rem;
		bottom:-4rem;
		width:12rem;
		box-shadow: 4px 4px 10px rgba(0,0,0,.4);
		color:#fff;
		font-family: Arial, sans-serif;
		text-align:center;
		padding:0.75rem;
/*		background-color: #093871;*/
		background: rgba(0,16,44,0.55);
		background: linear-gradient(175deg, rgba(80,96,124,0.55) 0%, rgba(0,16,44,0.55) 100%);
		border-radius:1.5rem;
		z-index:999;
		/*display:block;*/
		/* border:1px solid #093871; */
			font-size:1rem;
			font-style:normal;
			color:#fff;
			/* letter-spacing:.05rem; */
	}
/*	a.trans { background-color:rgba(0, 16, 44, .45); }	*/
	a.btnQuick:hover, a.btnMore:hover {
		background-color:transparent;
		background: rgba(44,44,44,1);
		background: linear-gradient(175deg, #bbb 0%, #444 100%);
		color:#fff;
		/*background-image:none;
		opacity:1;*/
		letter-spacing:.075rem;
	}
	a.btnQuick__active, a.btnQuick__active:hover, a.btnMore__active, a.btnMore__active:hover {
		border-radius:.75rem;
		color:#fff;
		background-color:#093871;
		background-image:none;
		letter-spacing:normal;
	}
/*		.quickbutton h3 {
			font-size:1.25rem;
			font-style:normal;
			color:#fff;
			z-index:1000;
		} */
	.quickbox {
		font-family: 'Arial', sans-serif;
		margin-top:0.75rem;
		position:absolute;
		right:2rem;
		top:4rem;
		width:12rem;
		box-shadow: 4px 4px 18px rgba(0,0,0,.5);
		padding: 0.75rem;
		background-color: #fff;
		z-index:1000;
		border-radius:.75rem;
	}

/*a.trans { background-color:rgba(9, 56, 113, 0.65); }	*/

	.quickbox a, .quickbox a:visited {
		font-size: 0.85rem;
		text-align:center;
		vertical-align: bottom;
		width:1.75rem;
		height:1.75rem;
		background-color: #f1f3ff;
		color: #093871;
		font-weight:bold;
		/* font-style:italic;
		position: relative; 
		border: 0;
		padding-left: 0.25rem;
		cursor: pointer;
		overflow: hidden; */
		padding: 0.3rem;
		margin: .15rem;
		transition: all 150ms ease-in-out;
		border-radius: .375rem;
		display: inline-block;
	}
		.quickbox a:hover {
			color:#fff;
			background-color:#093871; /*#093871*/
			/* transform: scale(1.2); */
		}
		a.telegramm {
			width:5.85rem;
		}
	
	.YPissue {
		 display:flex; 
		 justify-content: center;
		 flex-wrap:wrap;
		 align-items:center;
		 gap:2rem;
		 /* flex-flow:row wrap;
		 flex-basis:0; */
	}
		.YPissue img {
			height:18rem;
			width:12.6875rem;
			float:right;
			box-shadow: 0 0 8px rgba(0,0,0,.75);
			/* height:auto;
			
			border-radius:4px; */
		}
		.YPissue__nr {
			padding:.5rem 0;
		}
	.YPgallery img {
		height:14rem;
		width:9.875rem;
		box-shadow: 0 0 8px rgba(0,0,0,.75);
	}
	a.YPgallery:hover {
		background-color:transparent;
	}
	.YPgallery:hover img { 
		transform: scale(1.02);
		transition:all 150ms ease-in-out; 
	}
	@media only screen and (max-width: 1024px) {
		.box__center {
			width:80%;
			margin:0 auto;
		}
	}
	@media only screen and (max-width: 700px) {
		.YPgallery img {
			height:9.375rem;
			width:6.625rem;
		}
		.box__center {
			width:100%;
			margin:0;
		}
	}
	@media only screen and (max-width: 560px) {
		.YPissue img {
			height:12rem;
			width:8.5rem;
			/*  Unter 560 pixel Screen verkleinern! */
		}
		.box {
			padding:.65rem;
		}
		.moreoverlay {
/*			position: absolute;*/
			width:100%;
			height:100%;
			border-radius: 0rem;
/*			left: 50%; top: 50%;
			transform: translateX(-50%) translateY(-50%);
			background: #ffefd3;
			margin-top: 0rem;*/
			padding: 1rem;
			box-shadow: none;
			overflow: scroll;
		}
	}
	

.archiv {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
.next, .prev {
	opacity:.3; 
	position:absolute;
	top:45%;
}
.next {
	right:0;
	left:auto;
}
.prev svg {
	transform:rotate(180deg);
 }
a.next:hover, a.prev:hover {
	opacity:1;
	background-color:transparent;
}

.rubriken {
	margin:0 4%;
	display:flex;
	flex-wrap:wrap;
	align-items:stretch;
	column-gap:10%;
	row-gap:1rem;
	/*width:100%;
	background: url('./artikel/rubrik/bilder/mathew-schwartz-BF2qFfWTciY-unsplash.jpg') center center no-repeat;
	background-size: cover;*/
}
.rubriken div {
	flex:1 1 45%;
	min-width:291px;
	/*position:relative;*/
	/*min-height:10rem;*/
	/*vertical-align:middle;
	text-align:center;*/
	/*background: rgb(80,80,80);
	background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.25) 100%);*/
	font-family: roboto, arial, sans-serif;
	font-size:2.5rem;
	font-weight:bold;
	font-style:italic;
	/*box-shadow: 4px 4px 10px rgba(0,0,0,.4);*/
}
.rubriken div a {
	width:100%;
	max-height:8.5rem;
	display:inline-flex;
	justify-content:space-between;
	align-items:center; 
	/*flex-wrap:wrap;*/
	border-radius:1rem;
	color:black;
	background: #fff3de;
	box-shadow: rgba(0, 0, 0, .1) 0 0 10px 3px;
	/*background: radial-gradient(rgba(0,35,35,0), rgba(0,35,35,.03));*/
	/*background: radial-gradient(rgba(0,35,35,0), rgba(0,35,35,.06));*/
	line-height: 1.15;
	text-shadow: 3px 3px 5px rgba(0,0,0,.25);
	padding:0 5%;
}
.rubriken div a:hover {
	background-color:transparent;
	color:#093871;
	background: #fff7e8; /*#fff3de; */
	/*background: linear-gradient(170deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 50%, rgba(0,0,0,0) 100%);*/
	/*linear-gradient(170deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 100%);*/
	/*background: rgba(0,35,35,.04); */
	transform: scale(1.05);
	transition:all 150ms ease-in-out; 
}
.rubriken div a .r_text { flex:1 1 66%; }
.rubriken div a .r_img {
	flex:0 0 33%;
	max-height:10rem;
	padding-left:1rem;
}
.rubriken div a img { width:100%; height:auto; max-height:134px; }

@media only screen and (max-width: 560px) {
	.rubriken div {
		font-size:2rem;
	}
}

/* Links */

.linkliste { border-collapse: collapse; }
.linkliste td { padding:1rem 0 1rem 0; }
.linkliste td:first-child {
	text-align:center;
	vertical-align:middle;
	padding-right:1rem;
}
	@media only screen and (max-width: 560px) {
		.linkliste td { border-bottom:1px solid #ccc; }
		.linkliste td:first-child { vertical-align:top; }
	}


/* Mail */

#mailform * {
  border: none;
}

.mailform__label {
	float: left;
	text-align: right;
	padding-top:0.5rem;
	margin-right: 1rem;
	width: 6.25rem;	
/*	display:block;
	margin-bottom:1rem;*/
	font-style:italic;
	font-size:0.9rem;
}

.mailform__label2 { font-size:1rem; }

#mailform  div {
	clear: both;
	margin-bottom:1rem;
}

#mailform input, #mailform textarea, #mailform select {
	border:1px solid hsl(38,50%,71%);
	border-radius:0.25rem;
	padding:.5rem;
	background-color:hsl(38,100%,96%);
	box-shadow: rgba(0, 0, 0, 0.15) 2px 5px 10px -5px;
}

#mailform textarea { max-width: 99%; }

#mailform select option[selected] {
  background-color: #f1f3ff;
}

#mailform input[type='submit']{
	margin-top:2rem;
	padding:1rem;
	border:1px solid #093871;
	background-color:#f1f3ff;
	margin-left: 7.25rem;	
}

#mailform input[type='submit']:hover { background-color:#bdd8fa; }



@media only screen and (max-width: 560px) {
	#mailform  .mailform__label {
		float: none;
		text-align: left;
		display:block;
	}
	#mailform input[type='submit']{ margin-left: 0;	}
	.mailform__label2 { 
		display: block;
		font-size:0.9rem;
	}
}


.footer {
	clear: both;
	/* border-top: #000 3px solid;
	border-bottom: #000 2px solid;
	margin-top:20px !important;  
	font-weight:bold; */
	background-color: #093871; /* #00009C; */
	font-family: 'Arial', sans-serif;
	font-size:0.8rem;
	text-align:center;
	color: #fff;
	padding:0.8rem;
}
.footer a, .footer a:visited {
	color:#fff;
	padding:0.2rem; /*0 0.2rem;*/
}
.footer a:hover {
	color:#093871;
	background-color:#fff;
}

.leserbrief {
  background: url(./bilder/bg_trans.gif);
  border:double #999999;
  font-family:Arial,Helvetica,sans-serif;
  font-size:10pt;
  padding:10px;
 }
 
#nr {
	 /*display:block; 
	 margin:0 0 0 112px; 
	 position:relative; 
	 top:-90px; 
	 width:352px; 
	 text-align:right; */
	 font-family:roboto, arial, sans-serif;
	 font-weight:bold;
	 font-style: italic;
	 color:#666; 
	 font-size:.85rem;
}