/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-ultimate-tree-menu-v3.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

/* -- General menu1 styles -- */
#sn_menu1_outer {width:98%; max-width:320px; margin:	0; position:relative; padding:0; -webkit-tap-highlight-color:#fff0;}
#sn_menu1_outer ul {list-style:none; grid-column-start:1; grid-column-end:3; margin:0; padding-left:20px;}
#sn_menu1_outer ul li {display:grid; grid-template-rows:30px 0fr; grid-template-columns:1fr 40px; overflow:hidden; transition:0.5s; cursor:pointer;}
#sn_menu1_outer ul li {justify-self:start; font:300 15px/26px arial, sans-serif; color:#000; text-decoration:none; display:inline-block;}
#sn_menu1_outer ul li a {justify-self:start; font:300 15px/26px arial, sans-serif; color:#000; text-decoration:none; display:inline-block;}
#sn_menu1_outer ul li a:hover {text-decoration:underline;}

#sn_menu1_outer #sn_menu1 {position:relative; z-index:10; padding:0;}
#sn_menu1_outer #sn_menu1 li ul {min-height:0;}
#sn_menu1_outer #sn_menu1 ul ul {border-left:1px solid #ccc;}
#sn_menu1_outer #sn_menu1 li span {justify-self:end; display:block; width:30px; height:30px; position:relative; z-index:1; margin-right:10px; font:400 28px/30px arial, sans-serif; color:#000; text-align:center; cursor:pointer;}
#sn_menu1_outer #sn_menu1 li span::before {display:block; content:"+";}
#sn_menu1_outer #sn_menu1 li b {padding-left:20px; color:#000; font:bold 19px/30px arial, sans-serif; position:relative; z-index:1;}
#sn_menu1_outer #sn_menu1 li b::before {content:"Zeitungen";} /* \2630 Menu */

#sn_menu1_outer ul li h5 {cursor:default; font-weight:bold;}
#sn_menu1_outer ul li h5 a {font:300 19px/30px arial, sans-serif;}


/* -- Slide menu1 down styles -- */
#sn_menu1_outer #sn_menu1 li:focus-within {grid-template-rows:30px 1fr;}
#sn_menu1_outer #sn_menu1 li:focus-within > span,
#sn_menu1_outer #sn_menu1 li:focus-within > b {z-index:-10;}
#sn_menu1_outer #sn_menu1 li:focus-within > span::before {content:"\2212";} /* Minus */
#sn_menu1_outer #sn_menu1 li:focus-within > b::before {content:"Zeitungen"} /* \2715 X */

/* -- Slide menu1 up styles -- */
#sn_menu1_outer #sn_menu1 li:focus {grid-template-rows:30px 0fr;}
#sn_menu1_outer #sn_menu1 li:focus > span,
#sn_menu1_outer #sn_menu1 li:focus > b {z-index:1;}
#sn_menu1_outer #sn_menu1 li:focus > span::before {content:"+";}
#sn_menu1_outer #sn_menu1 li:focus > b::before {content:"Zeitungen"} /* \2630 Menu */

/********************************/
/* -- General menu2 styles -- */
#sn_menu2_outer {width:98%; max-width:320px; margin:	0; position:relative; padding:0; -webkit-tap-highlight-color:#fff0;}
#sn_menu2_outer ul {list-style:none; grid-column-start:1; grid-column-end:3; margin:0; padding-left:20px;}
#sn_menu2_outer ul li {display:grid; grid-template-rows:30px 0fr; grid-template-columns:1fr 40px; overflow:hidden; transition:0.5s; cursor:pointer;}
#sn_menu2_outer ul li a {justify-self:start; font:300 15px/26px arial, sans-serif; color:#000; text-decoration:none; display:inline-block;}
#sn_menu2_outer ul li a:hover {text-decoration:underline;}

#sn_menu2_outer #sn_menu2 {position:relative; z-index:10; padding:0;}
#sn_menu2_outer #sn_menu2 li ul {min-height:0;}
#sn_menu2_outer #sn_menu2 ul ul {border-left:1px solid #ccc;}
#sn_menu2_outer #sn_menu2 li span {justify-self:end; display:block; width:30px; height:30px; position:relative; z-index:1; margin-right:10px; font:400 28px/30px arial, sans-serif; color:#000; text-align:center; cursor:pointer;}
#sn_menu2_outer #sn_menu2 li span::before {display:block; content:"+";}
#sn_menu2_outer #sn_menu2 li b {padding-left:20px; color:#000; font:bold 19px/30px arial, sans-serif; position:relative; z-index:1;}
#sn_menu2_outer #sn_menu2 li b::before {content:"TV-Beiträge";} /* \2630 Menu */

#sn_menu2_outer ul li h5 {cursor:default; font-weight:bold;}
#sn_menu2_outer ul li h5 a {font:300 19px/30px arial, sans-serif;}


/* -- Slide menu2 down styles -- */
#sn_menu2_outer #sn_menu2 li:focus-within {grid-template-rows:30px 1fr;}
#sn_menu2_outer #sn_menu2 li:focus-within > span,
#sn_menu2_outer #sn_menu2 li:focus-within > b {z-index:-10;}
#sn_menu2_outer #sn_menu2 li:focus-within > span::before {content:"\2212";} /* Minus */
#sn_menu2_outer #sn_menu2 li:focus-within > b::before {content:"TV-Beiträge"} /* \2715 X */

/* -- Slide menu2 up styles -- */
#sn_menu2_outer #sn_menu2 li:focus {grid-template-rows:30px 0fr;}
#sn_menu2_outer #sn_menu2 li:focus > span,
#sn_menu2_outer #sn_menu2 li:focus > b {z-index:1;}
#sn_menu2_outer #sn_menu2 li:focus > span::before {content:"+";}
#sn_menu2_outer #sn_menu2 li:focus > b::before {content:"TV-Beiträge"} /* \2630 Menu */


/* Modales Fenster */

#modal-close,
.action-hidden		{position:absolute; left:-9999px; display:none;}
.action-panel		{display:inline-block; cursor:pointer; font-size:2vmin; color:#000; line-height: 3vh; font-weight:bold;}
.action-panelX		{display:inline-block; font-size:2vmin; color:#000; line-height: 3vh; font-weight:bold;}
.action-panel a		{text-decoration:none; color:#fff; }
.action-panelX a	{text-decoration:none; color:#000; }

.fullscreen-X {width:99%; height:3vh; background:#fff; padding-left:19px;}
.fullscreen-1 {width:99%; height:3vh; background:#fff; padding-left:19px;}
.fullscreen-2 {width:99%; height:3vh; background:#fff; padding-left:19px;}
.fullscreen-3 {width:99%; height:3vh; background:#fff; padding-left:19px;}
.fullscreen-4 {width:99%; height:3vh; background:#fff; padding-left:19px;}
.fullscreen-5 {width:99%; height:3vh; background:#fff; padding-left:19px;}
.fullscreen-6 {width:99%; height:3vh; background:#fff; padding-left:19px;}
.fullscreen-7 {width:99%; height:3vh; background:#fff; padding-left:19px;}
.fullscreen-8 {width:99%; height:3vh; background:#fff; padding-left:19px;}
.fullscreen-9 {width:99%; height:3vh; background:#fff; padding-left:19px;}

/*.popup {position:fixed; left:-100vw; top:25vh; width:50vw; height:50vh; opacity:0; transition: opacity 0.75s, left 0s 0.75s; z-index:1000;}*/
.popup {position:fixed; left:-100vw;  top:0vh; width:100vw; height:100vh; opacity:0; transition: opacity 0.75s, left 0s 0.75s; z-index:1000;}
.popup2m {position:fixed; left:-100vw;  top:81px; width:100vw; height:100vh; opacity:0; transition: opacity 0.75s, left 0s 0.75s; z-index:1000;}

label.modal-close {display:block; width:25px; height:25px; color:#fff; position:absolute; right:25px; top:5px; cursor:pointer;}
label.modal-close-v {display:block; width:25px; height:25px; color:#f00; position:absolute; right:50px; top:50px; cursor:pointer; }
/*label.modal-close {display:block; width:3vw; height:3vw; color:#fff; position:absolute; right:2vw; top:2vw; cursor:pointer;}*/

label.modal-close:before {display:block; content:""; width:100%; height:4px; background:#f00; position:absolute; left:0; top:50%; 
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}

label.modal-close:after {display:block; content:""; width:100%; height:4px; background:#f00; position:absolute; left:0; top:50%; 
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}

.modal-fullscreen-X {background:#fff;}
.modal-fullscreen-1 {background:#fff;}
.modal-fullscreen-2 {background:#000;}
.modal-fullscreen-3 {background:#fff;}
.modal-fullscreen-4 {background:#fff;}
.modal-fullscreen-5 {background:#fff;}
.modal-fullscreen-6 {background:#fff;}
.modal-fullscreen-7 {background:#fff;}
.modal-fullscreen-8 {background:#fff;}
.modal-fullscreen-9 {background:#fff;}

.popup img {display:block; height:auto; width:95%; position:absolute; left:0; top:0; right:0; bottom:10; margin:auto;}
.popupX img {display:block; height:auto; width:95%; position:absolute; left:0; top:0; right:0; bottom:10; margin:auto;}
/*{width:150px; display:block; max-width:50%; margin:5px 10px 0 0;}*/

/*.popup img {display:block; height:60vmin; max-height:600px; position:absolute; left:0; top:0; right:0; bottom:0; margin:auto;}*/
.popup0 img {display:block; height:60vmin; max-height:600px; margin:auto; }
.popup1 img {display:block; width:60vmin; max-width:600px; margin:auto; }
.popup2 img {display:block; height:7vmin; max-height:75px; margin:auto; }
.popup2m img {display:block; height:7vmin; max-height:75px; margin:auto; }
.popup3 img {display:block; width:80vmin; max-width:800px; margin:auto; padding-top:99px; }

#modal-fullscreen-X:checked ~ .modal-fullscreen-X,
#modal-fullscreen-1:checked ~ .modal-fullscreen-1,
#modal-fullscreen-2:checked ~ .modal-fullscreen-2,
#modal-fullscreen-3:checked ~ .modal-fullscreen-3,
#modal-fullscreen-4:checked ~ .modal-fullscreen-4,
#modal-fullscreen-5:checked ~ .modal-fullscreen-5,
#modal-fullscreen-6:checked ~ .modal-fullscreen-6,
#modal-fullscreen-7:checked ~ .modal-fullscreen-7,
#modal-fullscreen-8:checked ~ .modal-fullscreen-8,
#modal-fullscreen-9:checked ~ .modal-fullscreen-9 {left:0; }

.modal-overlay-close {display:block; width:100vw; height:0; position:fixed; left:0; top:0; background:rgba(0,0,0,0.5); transition: left 1s; z-index:100; cursor:pointer;}
.action-hidden:checked ~ .modal-overlay-close {height:100vh;}
#modal-right-fixed:checked ~ .modal-overlay-close {left:-40vw;}
#modal-left-fixed:checked ~ .modal-overlay-close {left:40vw;}

/*  img {display:block; float:left; max-width:50%; margin:5px 10px 0 0;}  */
  img.starx {width:150px; display:block; max-width:50%; margin:5px 10px 0 0;}
  img.star {width:150px; display:block; float:left; max-width:50%; margin:5px 10px 0 0;}
  img.star0 {width:150px; display:block; float:left; max-width:50%;}
  img.star130 {width:130px; display:block; float:left; max-width:50%; margin:5px 9px 0 0;}
  img.star13 {width:13px; display:block; float:left; max-width:50%; margin:5px 9px 0 0;}
  img.star300 {width:95vmin;display:block; float:left; max-width:300px; margin:5px 10px 0 0;}
  img.star500 {width:95vmin;display:block; float:left; max-width:980px; margin:5px 10px 0 0;}
  
  img.cafe {width:250px;}

/* spezielle Klassen */
.modaloptY2 { display:block;background:#fff;border:1px solid #000;border-radius:5px;padding:3px;margin-top:9px;font-weight:normal;text-align:center;width:93vw;margin:0px auto; }

.internal-link::before {
  content: "\25ba";
  color:#5f80ad;
  margin-right: 5px;
}

.external-link::before {
  content: "\25ba";
  color:#5f80ad;
  margin-right: 5px;
}

.external-link::after {
  content: url("external2b.png");
  margin-left: 5px;
}

.external-link2::after {
  content: url("external2.png");
  margin-left: 5px;
}
/****************/

.external-link3::before {
  content: "\25ba";
  color:#5f80ad;
  margin-right: 5px;
}
  
.external-link3::after {
  content: url("video4.png");
  margin-left: 5px;
}

}
/**********/

/*fieldset {border:1px solid #5f80ad;border-radius:11px;margin:20px;padding:10px;}*/
fieldset {border:1px solid #5f80ad;border-radius:11px;margin:0px;padding:10px;}
legend {font:400 18px/25px 'Roboto',arial,sans-serif;color:#321;}

.modaltext {text-align:left;padding:5px;width:80vw;font:normal 19px sans-serif;line-height:1.7;margin-top:0px;margin-bottom:0px;}
.modaltext2{text-align:left;padding:5px;width:80vw;font:normal 19px sans-serif;line-height:1.7;margin-top:0px;margin-bottom:0px;list-style:none;}

.modaltext3 {text-align:left;padding:5px;width:80vw;font:400 18px/22px 'Roboto', arial, sans-serif;line-height: 1.7;color: #5f80ad;margin-top:0px;margin-bottom:0px;}
/*.modaltextul {text-align:left;padding:5px;width:80vw;font:400 18px/22px 'Roboto', arial, sans-serif;line-height: 1.7;color: #5f80ad;margin-top:0px;margin-bottom:0px;margin-bottom:10px;}*/



@viewport {width:extend-to-zoom; zoom:1.0;}
html, body {padding:0; margin:0; width:100vw; height:100vh; overflow:hidden;}
.background-image  {width:30vw; height:100vh; position:fixed; left:0; background:url(dpp2024.jpg); background-size:contain; background-position:left top; background-repeat:no-repeat;}
.background-image2 {width:auto; height:40vh; background:url(hamburgbau78_300.jpg); background-size:contain; background-position:left top; background-repeat:no-repeat;}
.background-image3 {width:auto; height:40vh; background:url(leitlinien_300a.jpg); background-size:contain; background-position:left top; background-repeat:no-repeat;}

.background-image4 {width:99vw; height:100vh; position:fixed; left:15vw; background:url(NeinDanke7b.png); background-size:contain; background-position:left bottom; background-repeat:no-repeat;}

/* header {height:81px; min-height:81px; width:100%; background:url(bgwiese.jpg); position:relative;} */
.sonne img {display:block;height:35px;width:35px;position:absolute;left:0;top:0;text-align:left;margin:0;}

body {font-family:'Roboto Condensed', arial, sans-serif;
font-weight:normal;
font-synthesis: none;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: 'liga', 'kern';
direction: ltr;
text-align: left;
-webkit-font-smoothing: antialiased !important;
}

.scroll-container {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto; /* Ermöglicht vertikales Scrollen */
	width: 100vw;
	height:100vh; /* Der Container ist genauso hoch wie die Ansicht */
	scroll-snap-type: y mandatory; /* Vertikales Einrasten erzwingen */
	scroll-snap-stop:always;
	scroll-padding: 0; /* Keine zusätzliche Einrast-Abstandspolsterung */
	/*background:#cdffcc;*/
	background:url(bgwieseL04Rc.jpg);
}

.scroll-container0 {
	position: relative;
	overflow-x: hidden;
	overflow-y: auto; /* Ermöglicht vertikales Scrollen */
	width: 100vw;
	height:100vh; /* Der Container ist genauso hoch wie die Ansicht */
	scroll-snap-type: y mandatory; /* Vertikales Einrasten erzwingen */
	scroll-snap-stop:always;
	scroll-padding: 0; /* Keine zusätzliche Einrast-Abstandspolsterung */
	background:#cdffcc url(NeinDanke7b.png);background-size:30%; background-position:90% top; background-repeat:no-repeat;
}

.scroll-container .page {
	height: 100vh; /* Jeder Abschnitt ist so hoch wie der Viewport */
	width: 55vw;
	margin:0 2vw 0 31px; /*8.5vw*/
	display: block;
	scroll-snap-align: start; /* Einrasten am Anfang jedes Abschnitts */
}

.scroll-container0 .page {
	height: 100vh; /* Jeder Abschnitt ist so hoch wie der Viewport */
	width: 55vw;
	margin:0 2vw 0 31px; /*8.5vw*/
	display: block;
	scroll-snap-align: start; /* Einrasten am Anfang jedes Abschnitts */
}


/*
h1 {font:300 6vmin/6vmin   'Roboto Condensed', arial, sans-serif; color:#000; margin:0; padding:3vh 5vw 2vh 0;}
h2 {font:300 4vmin/4vmin   'Roboto Condensed', arial, sans-serif; color:#000; margin:0; padding:0.3vh 5vw 2vh 0;}
p  {font:normal 4vmin/4.5vmin 'Roboto Condensed', arial, sans-serif; color:#000; margin:0; padding:0.3vh 5vw 0 0;}
*/
/*p			{font:normal 3vmin/3.5vmin 'Roboto Condensed', arial, sans-serif; color:#000; margin:0; padding:0.5vh 5vw 1vh 0.5vw;}*/
/*p			{font:normal 2.5vmin/3.0vmin 'Roboto Condensed', arial, sans-serif; color:#000; margin:0; padding:0.5vh 5vw 1vh 0.5vw;}*/
p			{font:normal 18px / 22px 'Roboto Condensed', arial, sans-serif; color:#000; margin:0; padding:0.5vh 5vw 1vh 0.5vw;}
 
ul li		{padding-top:9px; margin-left:-25px; font:normal 2vmin/2.5vmin 'Roboto Condensed', arial, sans-serif; color:#000;}

@media only screen and (max-width:480px) {
/*.background-image {background:transparent;}*/
.scroll-container .page {
  width: 90vw;
  margin:0 2vw 0 31px; /*8.5vw*/
  background:#cdffcc;
}

.scroll-container0 .page {
  width: 90vw;
  margin:0 2vw 0 31px; /*8.5vw*/
  background:#cdffcc;
}

/*
h1 {font:300 7vmin/7vmin   'Roboto Condensed', arial, sans-serif; color:#000; margin:0; padding:3vh 0 2vh 0;}
h2 {font:300 5vmin/5vmin   'Roboto Condensed', arial, sans-serif; color:#000; margin:0; padding:0.3vh 0 2vh 0;}
p  {font:normal 4vmin/4.5vmin 'Roboto Condensed', arial, sans-serif; color:#000; margin:0; padding:0.3vh 0 0 0;}
*/
p		{font:normal 4vmin/4.5vmin 'Roboto Condensed', arial, sans-serif; color:#000; margin:0; padding:0.5vh 5vw 1vh 0.5vw;}
ul li	{margin-left:-25px; font:normal 4vmin/4.5vmin 'Roboto Condensed', arial, sans-serif; color:#000;}
}

header {height:90px; min-height:90px; width:100%; background:url(bgwiese.jpg); position:relative;}

#slides {width:95%; max-width:1200px; margin:0;} 
#slides h2 {font:600 20px/32px "Raleway", arial, sans-serif; color:#000; font-size: clamp(16px, 2vw, 22px); text-align:center;}
#slides summary {font:300 20px/32px "Raleway", arial, sans-serif; color:#000; font-size: clamp(16px, 2vw, 22px); cursor:pointer;}

#slides .show {display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows 0.5s; width:100%;}
#slides .show-end {min-height:0; align-self:end; width:100%;}
#slides details[open] + div {grid-template-rows:1fr; transition:grid-template-rows 0.5s;}
#slides p {font:400 16px/20px "Raleway", arial, sans-serif; color:#000; font-size: clamp(12px, 2vw, 16px); padding:0; margin:0;}
#slides p a {display:block; text-align:center;}
details > summary {list-style-type: '\1f4d8';}
details[open] > summary {list-style-type: '\1f4d6';}
#slides img {margin: 15px 0 0 32px;}
h4.info {font:600 16px/22px "Raleway", arial, sans-serif; color:#000; font-size: clamp(14px, 2vw, 20px); text-align:center;}

legend {
	display:block;
	font: 300 4vmin / 4.5vmin 'Roboto Condensed', arial, sans-serif;
    background:transparent;
	color:#000;
}
/*
border-style: groove;
border: 1px solid #0b203d;
border-radius: 3px;
background: #0b203d;*/
fieldset {
	display:block;
	margin-top:9px;
	margin-left:0;
    border: 1px solid #0b203d;
    border-radius: 9px;
    background: #fff;
}