/* Stylesheet 27.05.202024*/

/* ====================================================   GLOBAL DEFINITION   ==================================================== */

        :root {
            --kopf: #f4db97;
            --kopf-dunkel: #92b8f9;
			--kopf-hell: #fff;
			--kopf-mittel: #8eff96;
            --menu: #FBE55F;
            --menu-hover: #FFD922;
            --primary-dark:#00BFFF;
			--seiten-bg: #F3EEE6;
            --papier: #FFFDF8;
            --papier-rand: #D8C8B1;
            --paper: #FFFDF8;
            --paper-border: #D8C8B1;
            --notice: #F1E4CE;
            --notice-border: #8A5A20;
            --text: #000000;
            --link: #000000;
            --link-hover: #ad7726;
            --heading: #000000;
            --hinweis: #F1E4CE;
            --hinweis-rand: #8A5A20;
            --footer: #FFEFAE;
            --footer-dunkel: #E99A45;
            --focus: #005FCC;
            --max-width: 1180px;
            --shadow: 0 3px 10px rgba(0, 0, 0, 0.20);
            --radius: 6px;
        }


/* alternatives Boxmodell */
html { 
  box-sizing: border-box; 
  background: #ddd;
} 

*, ::before, ::after { 
  box-sizing: inherit; 
}

body {
	max-width: 98%;
	margin:0 auto;
	padding: 0;
	background: #fff;	
	color: #222; 
	font: normal 1em Arial, sans-serif;  /* Mindestschriftgröße wird dem Browser, bzw. dem Nutzer überlassen! */
    font-size: 0.90em;                
}

        /* =========================================================
           RESET
           ========================================================= */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            background: var(--seiten-bg);
            color: var(--text);
            font-family:
                Georgia,
                "Times New Roman",
                serif;
            font-size: 1.2rem;
            line-height: 1.7;
        }

        header img {
            max-width: 110px;
            height: auto;
        }

        /* =========================================================
           LINKS
           ========================================================= */
        a {
            color: var(--link);
            text-decoration: underline;
            text-decoration-thickness: 0.08em;
            text-underline-offset: 0.15em;
        }

        a:hover {
            color: var(--link-hover);
        }

        a:focus-visible,
        button:focus-visible,
        select:focus-visible {
            outline: 3px solid var(--focus);
            outline-offset: 3px;
        }

		.mitte {
            text-align: center;
        }
		
        /* =========================================================
           REDUZIERTE BEWEGUNG
           ========================================================= */

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* =========================================================
           SKIP-LINK
           ========================================================= */
        .skip-link {
            position: absolute;
            left: 10px;
            top: -60px;
            padding: 10px 15px;
            background: #000;
            color: #FFF;
            font-family:
                Arial,
                sans-serif;
            font-size: 1rem;
            font-weight: bold;
            text-decoration: none;
            z-index: 9999;
        }

        .skip-link:focus,
        .skip-link:focus-visible {
            top: 10px;
            color: #FFF;
        }

/* ====================================================   HEADER   ==================================================== */

	header {
		position: relative;		
		height: 9.8em;
		margin: 0;
		background: linear-gradient( to bottom,
						var(--kopf-dunkel), var(--kopf-hell), var(--kopf));
		background-size: contain; 			 
		padding: 0 18% 0.1em;
		width: 100%;
	}

	header a h1,
	header a p {			
		color: #fff; 
		border-left: 0;
		padding: 0;
		display: table;		
	}

	.abstand {
		margin-left: 20%;
	}
	
	.ribbon {
		display: inline-block;
		position: relative;	
		margin: 1.5% 0 1.5% 5%;
		padding: 0.2em 1em;
		background: radial-gradient(
			circle  at 90% 20%,
			yellow 2%,
			#ffc 0.8%,
			#00d);
		box-shadow: 0px 1px 3px rgba(0,0,0,.8);
		font-size: 0.5em;
		height: 17.5em;
		width: 90.5%; 
	}
	 
	.ribbon::before{
		display: block;
		width: 1.5em;
		height: 0;
		position: absolute;
		bottom: -1.5em;
		left: 0em;
		content: "";
		border-bottom: 1.5em solid transparent;
		border-right: 1.5em solid rgb(0, 80, 116);
	}
	
	.logo {
            display: block;
            width: 125px;
            max-width: 100%;
            height: auto;
			margin-left: 8em;
    }

        /* =========================
           NAVIGATION
           ========================= */

        .navigation {
            width: 100%;
            background: linear-gradient( to bottom, var(--kopf), var(--kopf-mittel));
            border-bottom: 1px solid #B78C4E;
			height: 2.5em;
			font-style: bold;
        }

        .navigation-inner {
            max-width: var(--max-width);
            margin: 0 auto;
            padding: 0 3px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        .menu {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }

        .menu > li {
            position: relative;
            list-style: none;
        }

        .menu a,
        .submenu-btn {
            display: flex;
            align-items: center;
            min-height: 48px;
            padding: 11px 16px;
            border: 0;
            background: transparent;
            color: #000;
            font-family: Arial, sans-serif;
            font-size: 1rem;
            font-weight: bold;
            line-height: 1.2rem;
            text-decoration: none;
            cursor: pointer;
        }

        .menu a:hover,
        .menu a:focus,
        .submenu-btn:hover,
        .submenu-btn:focus {
            background: var(--kopf-mittel);
            color: #1F160E;
        }

        .menu a[aria-current="page"] {
            background: rgba(255, 255, 255, 0.25);
        }

        .submenu {
            position: relative;
        }

        .submenu-btn::after {
            content: "▼";
            margin-left: 8px;
            font-size: 1em;
			font-style: bold;
        }

        .submenu.active .submenu-btn::after {
            content: "▲";
        }

        .submenu-list {
            display: none;
            position: absolute;
            left: 0;
            top: 100%;
            z-index: 1000;
            width: 300px;
            margin: 0;
            padding: 5px;
            list-style: none;
            background: var(--kopf);
            border: 1px solid #B78C4E;
            box-shadow: var(--shadow);
        }

        .submenu.active .submenu-list {
            display: block;
        }

        .submenu-list a {
            min-height: 44px;
            padding: 9px 13px;
            border-bottom: 1px solid rgba(100, 60, 25, 0.18);
        }

        .submenu-list li:last-child a {
            border-bottom: none;
        }
		
		@media (hover: hover) and (pointer: fine) {
			.submenu:hover > .submenu-list,
			.submenu:focus-within > .submenu-list {
				display: block;
			}
			.submenu:hover > .submenu-btn::after,
			.submenu:focus-within > .submenu-btn::after {
				content: " ▲";
			}
		}
		
	.menu-link {
	  position: relative;
	  text-decoration: none;
	}

	.menu-link .tooltip::after {
		bottom: auto;
		top: 50%;
		left: auto;
		right: 100%;
		transform: translateY(-50%);
		border: 5px solid transparent;
		border-right-color: #1f1f1f;
	}

	.tooltip {
	  position: absolute;
	  bottom: 130%;
	  left: 50%;
	  transform: translateX(-50%);
	  background: #1f1f1f;
	  color: #fff;
	  padding: 6px 10px;
	  border-radius: 4px;
	  font-size: 0.85rem;
	  white-space: nowrap;
	  /* unsichtbar, aber für Screenreader lesbar */
	  opacity: 0;
	  visibility: hidden;
	  transition: opacity 0.15s ease;
	}

	.tooltip::after {              /* kleines Dreieck */
	  content: "";
	  position: absolute;
	  top: 100%;
	  left: 50%;
	  transform: translateX(-50%);
	  border: 5px solid transparent;
	  border-top-color: #1f1f1f;
	}

	/* Wichtig: :focus-visible für Tastatur, :hover für Maus */
	.menu-link:hover .tooltip,
	.menu-link:focus-visible .tooltip {
	  opacity: 1;
	  visibility: visible;
	}
	
	.beschreibung {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


 
/** CONTENT **/

main {
	width: 100%;
	padding: 1em;
	background: #fff;
	font-size: 1.2em;
	
}
/*
.spalte {
	background: #FFF8DC;
	padding: 0.8em; 
}

.aseite { 
	max-width: 1200px;
    margin: 0 auto;
	background: #FFF8DC;
	padding: 0.8em;
}
*/
        .seite {
            max-width: 1200px;
            margin: 0 auto;
            padding: 25px 20px 50px;
        }
		
        .inhalt {
            max-width: 950px;
            margin: 0 auto;
            background: var(--papier);
            border: 1px solid var(--papier-rand);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: clamp(25px, 5vw, 55px);
        }


hr {
	margin-bottom: 1em;
}


h1,
h2 {
	font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; 
	padding-left: 1em; 
	color: #333; 
	text-transform: uppercase;
//	border-left:5px solid #4e68AD;
}
	
h2 span {
	font-size: 0.70em; 
	color: #444; 
	text-transform: none;
}

h3	{ 
	font-size: 1.25em; 
	font-weight: normal; 
	padding: 0px; 
	margin: 0px; 
	color: #333; 
}		

p {
	text-align: left; 
	line-height: 1.6em; 
	padding: 20px 0px
}

a 	{ 
	color: #333; 
	outline: none; 
	text-decoration: none; 
}
a:hover, 			/* Durch Maus oder Tastatur angewählte Verweise werden sichtbar gemacht */
a:focus { 
	color: #333; 
	text-decoration: none; 
	background-color: #A9A9A9;	
}

a.more	{ 
	float: right; 
	font-weight: bold; 
}

a.more:after{
	content:" \2192 ";
	font-size:1.2em;
	font-weight:bold;
}

ul.square {
	list-style-type:square;
    color: #999999;
    margin: 0 0

	0.5em 0.5em;
	font-size: 0.8em;
	font-weight: bold;
}

ul.square li{
	padding:10px;	
}

/*DL, DT, DD Datenliste*/
/*
dl.grid { 
  display: grid; 
  grid-template-columns: 1fr 100%; 
}
dd { 
  margin: 0; 
  padding-left: 1em; 
}

dd span:first-child {
  display: inline-block;
  width: 4em;
}

dl.grid dd {
  margin-bottom: 1em;
}
*/
a[href^="tel"] { white-space: nowrap; }

#bild { 
	margin-right: 10%;
}

/* =========================================================
   BUTTON
========================================================= */

        /* Buttons */
        .action-btn {
            align-items: center;
            background: var(--primary-dark);
            border: 0;
            border-radius: 8px;
            color: #fff;
            cursor: pointer;
            display: inline-flex;
            font: inherit;
			font-weight:bold;
            justify-content: center;
            margin: 4px;
            min-height: 48px;
            min-width: 48px;
            padding: 10px 18px;
            touch-action: manipulation;
        }

        .action-btn:hover {
            background: var(--primary-dark);
        }

.action{
	background:#0369a1;
	border:2px solid #075985;
	border-radius:8px;
	color:#d6d317;
	cursor:pointer;
	font:inherit;
	font-weight:bold;
	margin:0 7px;
	padding:9px 15px
}
.action:hover{
	background:#075985;
	color:#fff
}
		/* =========================================================
		   FOOTER
		========================================================= */

		#footer {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
			gap: 20px;

			padding: 20px;
			background: linear-gradient( to bottom,
						var(--kopf-mittel), var(--kopf), var(--kopf-hell), var(--kopf-dunkel));
			color: var(--text);
		}

		.footer-column {
			flex: 1 1 250px;
		}

		#footer p {
			margin: 0 0 8px;
			text-align: left;
		}

		#footer a {
			display: inline-block;
			margin: 4px 10px 4px 0;
			color: var(--text);
			text-decoration: none;
		}

		#footer a:hover {
			text-decoration: underline;
		}

       /* =========================================================
           DRUCK
           ========================================================= */

        @media print {

            body {
                background: #FFF;
                color: #000;
            }

            .skip-link, .navigation, footer {
                display: none;
            }

            .seite {
                padding: 0;
            }

            .inhalt {
                max-width: none;
                border: 0;
                box-shadow: none;
            }
			a {
					color: #000;
			}
		}

/* ========== repsonsives Grid-Layout ========== */

/* mobile first - auf schmalen Bildschirmen wird alles untereinander platziert. */ 

/* ab einer Breite von 30em haben zwei Spalten nebeneinander Platz: */

@media (min-width: 500px) { 
  body {
	  font-size: 1.4em;
  }
/*	  
  main {
  	display: grid;	  
    grid-template-columns: auto;
	grid-gap: 1em;
  }

  nav {
    grid-row: 4;
  }
*/  
.intro{
	text-align:center
}.intro h1{
	color:#000;font-size:2rem
}

 section{
	margin:30px 0
}
/*
  article {
    grid-row: 2;
  }  

  .spalte img {
	 float: left;
	 margin-right: 0.5em;		
  }
*/  
}



@media (min-width: 1000px) {
  body {
	  font-size: 1.4em;
  }	
  main {
    grid-template-columns: 20em auto;
 }
 
  nav {
    grid-row: 2 / 2;
  } 

  #intro {
    grid-column: 2 / 3;
    grid-row:    1 / 2;		
  }

  article {
    grid-column: 2 / 3;
	grid-row: 2 / 2;
  }

   aside {
    grid-column: 3 / 3;
    grid-row: 2 / 2;	
  }   
  
  .spalte {
    grid-row:    3 / 2;	
  }
    
  .spalte img {
     width: 33%;
  } 
}