/* =================================================================
   gesamt.css – die einzige Stildatei der Website.
   Zusammengeführt aus style.css, navi.css, responsive.css und druck.css
   (Oktober 2026), ungenutzte Regeln entfernt. Neue Regeln am Ende.
   Nach Änderungen in module/kopf.php gesamt.css?v=1 auf ?v=2 usw. erhöhen.
   ================================================================= */

/* ===== Grundgestaltung ===== */
/* RESET ------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, fuss, kopf, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older bzeilesers */
article, aside, details, figcaption, figure, fuss, kopf, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-size: 100.01%;
	height: 100.1%;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
div {
	position: relative;
	min-width: 0;
}
strong {
	font-weight: 600;
}
em {
	font-style: italic;
}
/* Ende RESET ---------------------------------- */

html {
	height: 101%;
}
body {
	font-family:  'Open Sans', 'Arial', 'Verdana', 'Helvetica', Sans-Serif;
	background-color: #fff;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0px;
	font-size: 101.1%;
	color: #000;
	/* Hintergrundbild wird in module/kopf.php gesetzt */
	background-repeat:no-repeat;
	background-position:center center;
	background-attachment:fixed;
	-o-background-size: 100% 100%, auto;
	-moz-background-size: 100% 100%, auto;
	-webkit-background-size: 100% 100%, auto;
	background-size: 100% 100%, auto;
	background-size: cover;
	height: 100%;
}
/* Layout -------------------------------------- */
#metanavi {
	width: 100%;
	height: 40px;
}
#header {
	width: 100%;
	margin-top: 10px;
	padding-bottom: 10px;
	/*	background-color: #fff;*/
	background-image: url(../images/hgkopf.png);
	background-repeat: repeat-x;
	background-position: left center;
}
.wrapper {
	position: relative;
	width: 70%;
	min-width: 950px;
	max-width: 1140px;
	margin: 0 auto;
	text-align: left;
}
.content {
	position: relative;
	/*	background-color: rgba(255,255,255,0.8);*/
	width: 100%;
	margin-top: 50px;
	margin-bottom: 50px;
	text-align: left;
}
.leftcol {
	position: relative;
	width: 25%;
	float: left;
	padding: 2%;
	background-color: rgba(255, 255, 255, 0.8);
}
.maincol {
	position: relative;
	width: 68%;
	padding: 2%;
	float: right;
	margin-bottom: 180px;
	background-color: rgba(255, 255, 255, 0.8);
}
.maincol.start {
	background-color: rgba(255, 255, 255, 0);
	padding: 0;
}
.maincol:hover, .leftcol:hover {
	background-color: rgba(255, 255, 255, 10);
}
.maincol:hover.start {
	background-color: rgba(255, 255, 255, 0) !important;
}
.start .box {
	background-color: #fff;
	padding: 2%;
	margin-bottom: 30px;
	background-color: rgba(255, 255, 255, 0.8);
}
.start .box:hover {
	background-color: rgba(255, 255, 255, 10);
}
.sonderinfo {
    background-color: red;
}
.sonderinfo:hover {
    background-color: red;
}
.maincol.sonderinfo a {
    display: block;
        padding: 10px;
    font-size: 1.2em;
    color: #fff !important;
    text-decoration: none;
    line-height: 140%;
    background-color: red;
}
.maincol.sonderinfo a:hover {
    display: block;
    padding: 10px;
    color: #fff !important;
    text-decoration: none;
    
}

#footer {
	position: fixed;
	z-index: 1500;
	bottom: 0;
	width: 100%;
	color: #000;
	height: auto;
	padding-bottom: 5px;
	background-color: #007b3f;
	border-top: 0px solid #f8b830
}
/* zwei spalten */
.row {
	width: 100%;
	margin-bottom: 50px;
	border: 0px solid #000;
}
.col1-2, .col2-2 {
	float: left;
	width: 48%;
	margin-right: 4%;
}
.col1-2 {
}
.col2-2 {
	float: left;
	margin-right: 0;
}
.colbig {
	position: relative;
	float: left;
	width: 65%;
}
.colsmall {
	position: relative;
	float: right;
	width: 35%;
}
.content .colsmall {
	width: 230px;
}
.floatbox {
	position: relative;
	float: left;
	width: 48%;
	margin-right: 2%;
}
/* Textformatierungen -------------------- */
.maincol h1 {
	font-size: 26px;
	font-size: 1.5em;
	font-weight: 600;
	color: #013781;
	line-height: 130%;
	margin-bottom: 30px;
}
.maincol h2 {
	font-size: 22px;
	font-size: 1.2em;
	font-weight: 600;
	color: #3677b7;
	line-height: 130%;
	margin-top: 40px;
	margin-bottom: 20px;
}
.maincol h2:first-child {
	margin-top: 0;
}
.maincol h3 {
	font-size: 16px;
	font-size: 0.9em;
	font-weight: 600;
	color: #007b3f;
	line-height: 130%;
	margin-top: 30px;
	margin-bottom: 10px;
}
.maincol h3:first-child {
	margin-top: 0;
}
.maincol h4{
		font-size: 13px;
	font-size: 0.75em;
	color: #000;
	line-height:160%;
	margin-bottom: 0.80em;
	font-weight: 600;
}
.maincol p, .maincol td, .leftcol p, table.kalNavi td.kalAktu, table.kalAktu td.kalAkt {
	font-size: 13px;
	font-size: 0.75em;
	color: #000;
	line-height:160%;
	margin-bottom: 0.80em;
}
table.kalAktu td {
	font-size: 18px !important;
}

table.kalNavi td.kalNavi a.kalNavi {
display: inline-block;
padding: 4px !important;
}
.maincol a {
	color: #666;
	text-decoration: underline;
}
.maincol a:hover, .maincol a:active, .maincol a:visited {
	color: #000;
	text-decoration: underline;
}
.maincol ul {
	list-style-type: square;
	padding-left: 17px;
	margin-bottom: 0.85em;
}
.maincol ul.nonbullet {
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 0.85em;
}
.maincol li {
	font-size: 13px;
	font-size: 0.75em;
	color: #000;
	line-height:150%;
	margin-bottom: 0.80em;
}
a.telresp {
	color: #000;
	text-decoration: none;
}
p.trigger {
	cursor: pointer;
}
/* Sonderformate ------------------------- */

img#logo {
	float: right;
	width: auto;
	height: 260px;
	margin-top: 10px;
}
p#slogan {
	position: relative;
	color: #fff;
	font-size: 18px;
	font-size: 1.0em;
	float: left;
	/*margin-top: 130px;*/
	margin-top: 115px;
	line-height: 135%;
}

img.standorte {
float: left;
width: 48%;
margin-right: 1%;
}
/* Button */

p.button a {
	display: inline-block;
	background-color: #3677b7;
	color: #fff !important;
	text-decoration: none;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
}
p.button a:hover {
	background-color: #013781;
	color: #fff !important;
	text-decoration: none;
}

p.button a img {
	display: inline-block;
	height: 15px;
	width: auto;
	margin-left: 5px;
	padding-bottom: 2px;
	vertical-align: middle;
}
/* Formulargestaltung  */
label  /* Alle Labels UND Formularelemente ausw�hlen */ {
	border:0px solid #AF8728;
	text-align: left;
	width:100%;
	border-bottom:0px solid #FFA078;
}
form br { /* Alle Zeilenumbr�che in Formularen ausw�hlen */
/* das floating der labels und inputs aufheben */
}
.formular p {
	clear: both;
	padding-bottom: 6px;
	margin-bottom: 6px;
	border: 0px solid #000;
}
.form {
	display: block;
	width: 100%;
	background: #fff;
	border-bottom:1px solid #868889;
	border-top:1px solid #868889;
	border-right:1px solid #868889;
	border-left:1px solid #868889;
	margin:0px;
	text-align:left;
	color:#000;
	font-weight:normal;
	height: 2em;
}
.form2 {
	display: block;
	background-color: #2887BE;
	color: #fff;
	text-decoration: none;
	padding: 5px;
	padding-left: 10px;
	border: 0;
	cursor: pointer;
	font-size: 0.95em;
}
.form2:hover {
	display: block;
	background-color: #6BACD2;
	color: #fff;
	text-decoration: none;
}
img#fbblau {
	position: fixed;
	right: 4px;
	top: 340px;
	width: 40px;
}
.galerie {
	display: block;
	width: 100%;
}
.galerie img {
	float: left;
	width: 32%;
	height: auto;
	margin-right: 1%;
	margin-bottom: 10px;
}
/* Tabelle -------------- */

table.mitglieder {
	width: 100%;
	margin-bottom: 20px;
}
table.mitglieder td {
	padding: 1.5%;
	width: 30%;
	vertical-align:  top;
	background-color: #ddd;
}
table.mitglieder td.tabhg {
	background-color: #3677b7;
	color: #fff;
	font-size: 16px;
	font-size: 0.85em;
	height: 37px;
	line-height: 130%;
	padding-top: 10px;
	padding-bottom: 10px;
}
table.mitglieder td.footer {
	border-top: 1px solid #fff;
}

table.mitglieder td.tabhg a  {
	color: #fff;
}
/* Suchfeld ---------*/

#header #suche {
	position: absolute;
	width: 25%;
	left: 0;
	bottom: 33px;
	border: 0px solid #000;
	z-index: 300;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 1%;
	padding-bottom: 1%;
	background-color: rgba(255, 255, 255, 10);
	background-color: #013781;
}
#header #suche #suchbegriff {
	background-color: #ffffff;
	border: 1px solid #fff;
	height: 20px;
	line-height: 20px;
	width: 68%;
	float: left;
}
#header #suche #sbutton {
	background-color: #007b3f;
	color: #fff;
	float: right;
	width: 30%;
	height: 20px;
	line-height: 20px;
	border: 1px solid #007b3f;
	cursor: pointer;
}

.maincol #output li {
	margin-top: 20px;
}

.maincol #output li > a {
	font-weight: 600 !important;
	color: #000;
	font-size: 16px;
	font-size: 1.2em;
	}
/* InfoCenter -------------- */

p.trigger {
	text-decoration: underline;
	cursor: pointer;
}
h3.trigger {
	position: relative;
	display: block;
	font-size: 12px;
	font-size: 0.9em;
	font-weight: 500;
	font-weight: normal;
	text-align: left;
	margin: 0 auto 0;
	margin-bottom: 10px;
	color: #fff;
	line-height: 130%;
	padding: 5px;
	padding-right: 65px;
	background-color:#0175be;
	/*border-bottom: 1px solid #0175be;*/
	cursor: pointer;
}
h3.trigger span {
	position: absolute;
	text-indent: -800em;
	display: block;
	overflow: hidden;
	background-image:url(../images/toggleroff.png);
	background-repeat: no-repeat;
	background-position: right top;
	width: 25px;
	height: 25px;
	top: 5px;
	right: 5px;
	z-index: 800;
}
h3.trigger_active span {
	position: absolute;
	text-indent: -800em;
	display: block;
	overflow: hidden;
	background-image:none;
	background-image:url(../images/toggleron.png);
	background-repeat: no-repeat;
	background-position: right top;
	width: 25px;
	height: 25px;
	top: 5px;
	right: 5px;
	z-index: 800;
}

.toggle_container {
padding-top: 10px;
padding-bottom: 10px;
}

/* Gewerbefest Standorte -- */

ul.standorte {
list-style-type: none;
margin: 0;
padding: 0;
}

ul.standorte li {
float: left;
width: 48%;
margin-right: 2%;
margin-bottom: 20px;
}

ul.standorte img {
width: 100%;
}

/* Zeitungsarchiv ---------- */

.zeitungsarchiv {
display: flex; /* aktiviert das Flexbox-Modell */
flex-wrap: wrap; /* erlaubt mehrere Reihen */
gap: 1%; /* setzt den Abstand zwischen den Flex-Elementen */
}

.archivbox {
	display: block;
	width: 32%;
margin-bottom: 30px;
}

/* Terminliste ------------- */

/* alte Formate .kalAktO, .kalAktU {
	font-size: 13px;
	font-size: 0.75em;
	color: #000;
	margin-bottom: 20px;
	margin-top: 20px;
	
}

table.kalList td {
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
} */

.kalTabl {
	font-size: 12px;
	font-size: 0.85em;
}
.kalTabl .kalTbLst, .kalTabl div, div.kalTbSp1, div.kalTbSp2 {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	line-height: 140%;
}
/* Weiterlesen Accorion --- */
details {
  margin-top: 15px;
}
summary {
  display: inline-block;
  cursor: pointer;
  padding-bottom: 3px;
      color: #666;
    text-decoration: underline;
	font-size: 13px;
    font-size: 0.75em;
  
}
summary:hover {
  border-bottom: 1px solid #fff;
    padding-bottom: 3px;
}
details[open] summary ~ * {
  animation: open 0.3s ease-in-out;
}
@keyframes open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Video-Einbindung ----------------- */
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	margin-bottom: 40px;
}
.embed-container {
	
}
.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
}

/* Fussbereich ------------- */

#footer p {
	float: left;
	font-size: 12px;
	font-size: 0.75em;
	font-weight: 400;
	line-height: 150%;
	margin-top: 5px;
	color: #fff;
}
#footer a {
	color: #fff;
	text-decoration: none;
}
#footer a:hover {
	color: #fff;
	text-decoration:underline;
}
#footer img#fb {
	height: 15px;
	margin-left: 10px;
}

.suchbegriffe {
	display: block;
	position: absolute;
	left: -888em;
	bottom: 0;
	font-size: 9px;
}
/* Bildgalerie Masonry-Layout */

.masonry {
  column-count: 3;
  column-gap: 1em;
}

.item {
  width: 100%;
  display: inline-block;
  margin: 0 0 1em;
}
/* Kennzeichnung externer Links */
.exlink {
	position: relative;
	top: 0px;
	left: 0px;
}
a.exlink span {
	display: none;
}
a:hover.exlink span {
	display: block;
	position: absolute;
	top: 25px;
	left: 0;
	margin: 0px;
	background-color: #fff;
	padding: 5px;
	color: #000000;
	border: 1px solid #000;
	font: 10px Verdana, Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-decoration: none;
	z-index: 100;
}
a:hover.exlink {
	color: #000000;
	border: 0px;
	font-weight:normal;
	text-decoration: none;
	z-index: 200;
}
/* Ende exlink */


 /* *** Float containers fix: *** */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */
/* Beginn Grid-System -------------------- */

  * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.zeile {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	margin: 0 auto;
	text-align:left;
	border: 0px solid #000;
}
.zeile .zeile {
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0 -15px;
}
.spalte, .spalten {
	float: left;
	min-height: 1px;
	padding: 0 15px;
	position: relative;
	border: 0px solid #000;
}
 [class*="spalte"] + [class*="spalte"]:last-child {
float: right;
}
 [class*="spalte"] + [class*="spalte"].end {
float: left;
}
.zeile .eins {
	width: 8.33%
}
.zeile .zwei {
	width: 16.66%
}
.zeile .drei {
	width: 25%
}
.zeile .vier {
	width: 33.33%
}
.zeile .fuenf {
	width: 41.66%
}
.zeile .sechs {
	width: 50%
}
.zeile .sieben {
	width: 58.33%
}
.zeile .acht {
	width: 66.66%
}
.zeile .neun {
	width: 75%
}
.zeile .zehn {
	width: 83.33%
}
.zeile .elf {
	width: 91.66%
}
.zeile .zwoelf {
	width: 100%
}
/* Nicolas Gallagher's micro clearfix */
  .zeile:before, .zeile:after, .clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.zeile:after, .clearfix:after {
	clear: both;
}
.zeile, .clearfix {
	zoom: 1;
}
img {
	max-width: 100%;
}
  
  /* Mobile */
  @media only screen and (max-width: 750px) {
 body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
width: 100%;
min-width: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
 .container {
}
 .zeile {
width: auto;
min-width: 0;
margin-left: 0;
margin-right: 0;
border: 0px solid #000;
}
 .spalte, .spalten {
width: 100% !important;
float: none;
}
 .spalte:last-child, .spalten:last-child {
float: none;
}
 [class*="spalte"] + [class*="spalte"]:last-child {
float: none;
}
 .spalte:before, .spalten:before, .spalte:after, .spalten:after {
content:"";
display:table;
}
 .spalte:after, .spalten:after {
clear: both;
}
}
/* Ende Grid-System --------------- */

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../webfonts/open-sans-v15-latin-300.woff2') format('woff2'), url('../webfonts/open-sans-v15-latin-300.woff') format('woff');
}

/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../webfonts/open-sans-v15-latin-300italic.woff2') format('woff2'), url('../webfonts/open-sans-v15-latin-300italic.woff') format('woff');
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/open-sans-v15-latin-italic.woff2') format('woff2'), url('../webfonts/open-sans-v15-latin-italic.woff') format('woff');
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../webfonts/open-sans-v15-latin-regular.woff2') format('woff2'), url('../webfonts/open-sans-v15-latin-regular.woff') format('woff');
}

/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../webfonts/open-sans-v15-latin-600italic.woff2') format('woff2'), url('../webfonts/open-sans-v15-latin-600italic.woff') format('woff');
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../webfonts/open-sans-v15-latin-600.woff2') format('woff2'), url('../webfonts/open-sans-v15-latin-600.woff') format('woff');
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../webfonts/open-sans-v15-latin-700.woff2') format('woff2'), url('../webfonts/open-sans-v15-latin-700.woff') format('woff');
}

/* ===== Navigation ===== */
nav select {
	display: none;
}

#listmenu0 {
	list-style:none;
	margin:0px;
	padding:0;
}
#listmenu0 li {
}
#listmenu0 li a:link, #listmenu0 li a:visited, #listmenu0 li a:active, #listmenu0 li a:focus {
	display: block;
	text-decoration:none;
	color:#fff;
	font-weight: 400;
	font-size: 14px;
	font-size: 0.85em;
	line-height: 37px;
	height: 37px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: #013781;
	margin-bottom: 10px;
}
#listmenu0 li a.first {
	margin-top: 0;
}
#listmenu0 li.high a {
    background-color: red !important;
}
#listmenu0 li a:hover {
	background-color: #3677b7;
}
#listmenu1 {
	list-style:none;
	padding:0;
	margin-bottom: 10px;
}
#listmenu1 li {
	border-bottom:0px solid #ffffff;
	padding-top:2px;
	padding-bottom:2px;
}
#listmenu1 li a:link, #listmenu1 li a:visited, #listmenu1 li a:active, #listmenu1 li a:focus {
	display: inline-block;
	background: none;
	color: #000;
	padding: 0;
	border-left: 5px solid #3677b7;
	padding-left: 10px;
	line-height: 120%;
	height: auto;
	font-size: 12px;
	font-size: 0.75em;
	margin-bottom: 10px;
}
#listmenu1 li a:hover {
	color: #999;
}

nav select {
	padding: 20px;
	border: 10px solid #007b3f;
}
/* Metanavi  ------------------------- */

ul#metanavi {
	position: absolute;
	width: auto;
	list-style-type: none;
	margin:0;
	padding:0;
	line-height: 38px;
	height: 38px;
	top: 35px;
	left: -10px;
	z-index: 200;
}
ul#metanavi li {
	display: inline;
	margin: 0;
	padding: 0;
}
ul#metanavi li a {
	float: left;
	color:#000;
	display: block;
	text-decoration: none;
	font-size: 12px;
	font-size: 0.85rem;
	font-weight: 600;
/*	 text-shadow: 1px 1px 4px #fff; */
/*	text-transform:uppercase;*/
	padding-left: 10px;
	padding-right: 10px;/*	background-color: #000;*/
}
ul#metanavi li a:hover, ul#metanavi li a:active {
	color: #013781;
	text-decoration: none;
}
ul#metanavi li a.aktiv {
	color:#FFA000;
	font-weight: bold;
	text-decoration: none;
}
ul#metanavi li a.first {
	padding-left: 0;
}
ul#metanavi li a.last {
	padding-right: 0;
}
/* fussnavi  ------------------------- */

ul#fussnavi {
	position: relative;
	list-style-type: none;
	margin:0;
	padding:0;
	margin-top: 5px;
	text-align:left;
	float: right;
}
ul#fussnavi li {
	float: left;
	margin: 0;
	padding: 0;
	text-align:left;
}
ul#fussnavi li a {
		color:#fff;
	display: inline-block;
	text-decoration: none;
	font-size: 12px;
	font-size: 0.8rem;
	/* text-shadow: 0 1px #ffffff; */
	padding-left: 12px;
	padding-right: 12px;
	line-height:1.5em;
}
ul#fussnavi li a:hover, ul#fussnavi li a:active {
	color: #efefef;
	text-decoration: none;
}
ul#fussnavi li a.aktiv {
	color:#fff;
	font-weight: normal;
	text-decoration: none;
}
ul#fussnavi li a.first {
	padding-left: 0;
}
ul#fussnavi li a.last {
	padding-right: 0;
}
 @media only screen and (max-width: 980px) {
ul#fussnavi {
 margin-top: 20px;
 text-align:left;
}
}
/* Sprachwahl ---- */

ul#sprachwahl {
	list-style-type: none;
	padding: 0;
	margin: 0;
	float: right;
}
ul#sprachwahl li {
	float: left;
}
ul#sprachwahl a {
	display: inline-block;
	border-radius: 100%;
	background-color: #88ba14;
	color: #fff;
	text-decoration: none;
	font-family: 'Droid Sans', Arial, Verdana, Sans-Serif;
	font-size: 10px;
	font-size: 0.70em;
	padding: 5px;
	line-height: 100%;
	margin-left: 10px;
	margin-right: 0px;
}

/* ===== Handy und Tablet ===== */
@media only screen and (min-width: 960px) {
body {
 font-size: 100.1%;
}
 #header input {
 width: 65%;
}
}
@media only screen and (min-width: 1100px) {
body {
 font-size: 110.1%;
}
}
 @media only screen and (min-width: 1500px) {
body {
 font-size: 110.1%;
}
}
 @media only screen and (min-width: 1800px) {
body {
 font-size: 125.1%;
}
}
 @media only screen and (min-width: 2300px) {
body {
 font-size: 130.1%;
}
}
@media only screen and (max-width: 1024px) {
 img#fbblau {
display: none;
}
}
@media only screen and (max-width: 959px) {
body {
 font-size: 120.1%;
}
/* Layout -------------------------------------- */
#metanavi {
 width: 100%;
 height: auto;
}
ul#metanavi {
 position: relative;
 width: auto;
 line-height: 100%;
 height: auto;
 top: inherit;
 left: inherit;
}
ul#metanavi li {
 display: inline;
 margin: 0;
 padding: 0;
 line-height: 30px;
}
#leftcol ul#listmenu0 {
display: none;
}
 nav ul#listmenu0 {
display: none;
}
nav select {
display: inline-block;
width: 100%;
padding: 5px;
background-color:#eee;
font-weight: bold;
font-size: 14px;
}
 nav {
display: block;
margin-bottom: 1.0em;
}
#header {
 width: 100%;
 margin-top: 10px;
 padding-bottom: 10px;
/*	background-color: #fff;*/
background: none;
}
.wrapper {
 position: relative;
 width: 94%;
 min-width: 94%;
 max-width: 94%;
 margin: 0 auto;
 text-align: left;
}
.leftcol {
 position: relative;
 width: 100%;
 float: none;
 padding: 2%;
 background-color: rgba(255, 255, 255, 0.8);
}
.maincol {
	position: relative;
	width: 100%;
		padding: 2%;
	float: none;
}
.maincol:hover, .leftcol:hover {
background-color: #fff;
}

#footer {
height: auto;
padding-bottom: 5px;
}
/* zwei spalten */
.row {
 width: 100%;
 margin-bottom: 50px;
 border: 0px solid #000;
}
.col1-2, .col2-2 {
 float: none;
 width: 100%;
 margin-right: 0%;
}
.col1-2 {
}
.col2-2 {
 float: none;
 margin-right: 0;
}
.colbig {
 position: relative;
 float: none;
 width: 100%;
}
.colsmall {
 position: relative;
 float: none;
 width: 100%;
}
.content .colsmall {
 width: 100%;
}
.norespons {
display: none;
}
/* Sonderformate ------------------------- */

img#logo {
 float: none;
 width: 100%;
 height: auto;
 margin-top: 10px;
 margin-bottom: 15px;
}
p#slogan {
display: none;
}
img.standorte {
float: none;
width: 100%;
margin-right: 0%;
}

/* Button */

p.button a {
 display: block;
 background-color: #2887BE;
 color: #fff;
 text-decoration: none;
 padding: 5px;
 padding-left: 10px;
}
p.button a:hover {
 display: block;
 background-color: #6BACD2;
 color: #fff;
 text-decoration: none;
}
/* Formulargestaltung  */
label  /* Alle Labels UND Formularelemente ausw�hlen */ {
 display: block;
 border:0px solid #AF8728;
 text-align: left;
 width:100%;
 border-bottom:0px solid #FFA078;
}
form br { /* Alle Zeilenumbr�che in Formularen ausw�hlen */
/* das floating der labels und inputs aufheben */
}
.formular p {
 clear: both;
 padding-bottom: 6px;
 margin-bottom: 6px;
 border: 0px solid #000;
}
.form {
 display: block;
 width: 100%;
 background: #fff;
 border-bottom:1px solid #868889;
 border-top:1px solid #868889;
 border-right:1px solid #868889;
 border-left:1px solid #868889;
 margin:0px;
 text-align:left;
 color:#000;
 font-weight:normal;
 height: 2em;
}
.form2 {
 display: block;
 background-color: #2887BE;
 color: #fff;
 text-decoration: none;
 padding: 5px;
 padding-left: 10px;
 border: 0;
 cursor: pointer;
 font-size: 0.95em;
}
.form2:hover {
 display: block;
 background-color: #6BACD2;
 color: #fff;
 text-decoration: none;
}
 img#fbblau {
display: none;
}

/* Suchfeld ---------*/

#header #suche{
	position: relative;
width: 100%;
left: inherit;
	bottom: inherit;
	height: 30px;
	border: 0px solid #000;;
	z-index: 300;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 1%;
	padding-bottom: 1%;
	background-color: rgba(255, 255, 255, 10);
	background-color: #013781;
}

#header #suche .sform {
	background-color: #ffffff;
	border: 1px solid #fff;
	height: 20px;
	line-height: 20px;
	width: 68%;
	float: left;
}
#header #suche .sbutton {
	background-color: #007b3f;
	color: #fff;
	float: right;
	width: 30%;
	height: 20px;
	line-height: 20px;
	border: 1px solid #007b3f;
	cursor: pointer;
}


/* InfoCenter -------------- */

.akkordeon h1.trigger {
 position: relative;
 font-size: 12px;
 font-size: 1.0em;
 font-weight: 500;
 font-weight: normal;
 text-align: left;
 margin: 0 auto 0;
 color: #fff;
 line-height: 130%;
 padding: 5px;
 padding-right: 65px;
 background-color:#0175be;
	/*border-bottom: 1px solid #0175be;*/
	display: inline-block;
 cursor: pointer;
}
.akkordeon h1.trigger span {
 position: absolute;
 text-indent: -800em;
 display: block;
 overflow: hidden;
 background-image:url(../images/plus.png);
 background-repeat: no-repeat;
 background-position: right top;
 width: 25px;
 height: 25px;
 top: 5px;
 right: 5px;
 z-index: 800;
}
.akkordeon h1.trigger_active span {
 position: absolute;
 text-indent: -800em;
 display: block;
 overflow: hidden;
 background-image:none;
 background-image:url(../images/minus.png);
 background-repeat: no-repeat;
 background-position: right top;
 width: 25px;
 height: 25px;
 top: 5px;
 right: 5px;
 z-index: 800;
}
	
	.kalTabl .kalTbLst, .kalTabl div, div.kalTbSp1, div.kalTbSp2 {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
	line-height: 140%;
}
	
	/* Zeitungsarchiv ---------- */

.zeitungsarchiv {
display: flex; /* aktiviert das Flexbox-Modell */
flex-wrap: wrap; /* erlaubt mehrere Reihen */
gap: 1%; /* setzt den Abstand zwischen den Flex-Elementen */
}

.archivbox {
	display: block;
	width: 48%;

}
/* Fussbereich ------------- */

#footer p {
 float: none;
 font-size: 12px;
 font-size: 0.75em;
 font-weight: 400;
 line-height: 150%;
 margin-top: 20px;
 color: #fff;
}
#footer a {
 color: #fff;
 text-decoration: none;
}
#footer a:hover {
 color: #fff;
 text-decoration:underline;
}
 #footer img#fb {
height: 25px;
margin-left: 10px;
}
ul#fussnavi {
	float: none;
}
/* Bildgalerie Masonry-Layout */

.masonry {
  column-count: 2;
  column-gap: 0.5em;
}

.item {
  width: 100%;
  display: inline-block;
  margin: 0 0 1em;
}	
}

/* ===== Druck ===== */
@media print {
body {
	font-family:  'Open Sans', 'Arial', 'Verdana', 'Helvetica', Sans-Serif;
	background-color: #fff;
	text-align: left;
	font-weight: 400;
	letter-spacing: 0px;
	font-size: 101.1%;
	color: #000;
	background: none;
}
/* Layout -------------------------------------- */
.leftcol, #metanavi, #footer {
display: none;
}
#header {
	width: 100%;
	margin-top: 0px;
	padding-bottom: 10px;
	background: none;
}
.wrapper {
	position: relative;
	width: 17cm;
	text-align: left;
}
.content {
	position: relative;
	/*	background-color: rgba(255,255,255,0.8);*/
	width: 100%;
	margin-top: 50px;
	margin-bottom: 50px;
	text-align: left;
}
.maincol {
	position: relative;
	width: 100%;
}
.maincol.start {
background-color: rgba(255, 255, 255, 0);
padding: 0;
}
.maincol:hover, .leftcol:hover {
background-color: rgba(255, 255, 255, 10);
}

.maincol:hover.start {
background-color: rgba(255, 255, 255, 0) !important;
}

.start .box {
	background-color: #fff;
	padding: 2%;
	margin-bottom: 30px;
	background-color: rgba(255, 255, 255, 0.8);
}

.start .box:hover  {
	background-color: rgba(255, 255, 255, 10);
}

/* zwei spalten */
.row {
	width: 100%;
	margin-bottom: 50px;
	border: 0px solid #000;
}
.col1-2, .col2-2 {
	float: left;
	width: 48%;
	margin-right: 4%;
}
.col1-2 {
}
.col2-2 {
	float: left;
	margin-right: 0;
}
.colbig {
	position: relative;
	float: left;
	width: 65%;
}
.colsmall {
	position: relative;
	float: right;
	width: 35%;
}
.content .colsmall {
	width: 230px;
}
.floatbox {
	position: relative;
	float: left;
	width: 48%;
	margin-right: 2%;
}
/* Textformatierungen -------------------- */
.maincol h1 {
	font-size: 16pt;
	font-weight: 600;
	color: #013781;
	line-height: 130%;
	margin-bottom: 30px;
}
.maincol h2 {
	font-size: 12pt;
	font-weight: 600;
	color: #3677b7;
	line-height: 130%;
	margin-top: 40px;
	margin-bottom: 20px;
}
.maincol h2:first-child {
	margin-top: 0;
}
.maincol h3 {
	font-size: 10px;
	font-weight: 600;
	color: #007b3f;
	line-height: 130%;
	margin-top: 30px;
	margin-bottom: 10px;
}
.maincol h3:first-child {
	margin-top: 0;
}
.maincol p, .maincol td, .leftcol p, table.kalNavi td.kalAktu, table.kalAktu td.kalAkt {
	font-size: 10px;
	color: #000;
	line-height:160%;
	margin-bottom: 0.80em;
}
table.kalAktu td {
	font-size: 10pt !important;
}
.maincol a {
	color: #666;
	text-decoration: underline;
}
.maincol a:hover, .maincol a:active, .maincol a:visited {
	color: #000;
	text-decoration: underline;
}
.maincol ul {
	list-style-type: square;
	padding-left: 17px;
	margin-bottom: 0.85em;
}
.maincol li {
	font-size: 10pt;
	color: #000;
	line-height:150%;
	margin-bottom: 0.80em;
}
a.telresp {
	color: #000;
	text-decoration: none;
}
p.trigger {
	cursor: pointer;
}
/* Sonderformate ------------------------- */

img#logo {
	width: auto;
	height: 3.5cm;
	margin-top: 0px;
}
p#slogan {
	display: none;
}
/* Button */

p.button a {
	display: block;
	background-color: #2887BE;
	color: #fff;
	text-decoration: none;
	padding: 5px;
	padding-left: 10px;
}
p.button a:hover {
	display: block;
	background-color: #6BACD2;
	color: #fff;
	text-decoration: none;
}
/* Formulargestaltung  */
label  /* Alle Labels UND Formularelemente ausw�hlen */ {
	border:0px solid #AF8728;
	text-align: left;
	width:100%;
	border-bottom:0px solid #FFA078;
}
form br { /* Alle Zeilenumbr�che in Formularen ausw�hlen */
/* das floating der labels und inputs aufheben */
}
.formular p {
	clear: both;
	padding-bottom: 6px;
	margin-bottom: 6px;
	border: 0px solid #000;
}
.form {
	display: block;
	width: 100%;
	background: #fff;
	border-bottom:1px solid #868889;
	border-top:1px solid #868889;
	border-right:1px solid #868889;
	border-left:1px solid #868889;
	margin:0px;
	text-align:left;
	color:#000;
	font-weight:normal;
	height: 2em;
}
.form2 {
	display: block;
	background-color: #2887BE;
	color: #fff;
	text-decoration: none;
	padding: 5px;
	padding-left: 10px;
	border: 0;
	cursor: pointer;
	font-size: 0.95em;
}
.form2:hover {
	display: block;
	background-color: #6BACD2;
	color: #fff;
	text-decoration: none;
}
img#fbblau {
	display: none;
}
.galerie img {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}
/* Tabelle -------------- */

table.mitglieder {
	width: 100%;
	margin-bottom: 20px;
}
table.mitglieder td {
	padding: 1.5%;
	width: 30%;
	background-color: #fff;
}
table.mitglieder td.tabhg {
	background-color: #fff;
	color: #000;
	font-size: 14pt;
	height: 37px;
	line-height: 37px;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 1px solid #000;
}
table.mitglieder td.footer {
	border-top: 1px solid #fff;
}
/* Suchfeld ---------*/

#header #suche {
display: none;
}
/* InfoCenter -------------- */

p.trigger {
	text-decoration: underline;
	cursor: pointer;
}
h1.trigger {
	position: relative;
	font-size: 12px;
	font-size: 1.0em;
	font-weight: 500;
	font-weight: normal;
	text-align: left;
	margin: 0 auto 0;
	color: #fff;
	line-height: 130%;
	padding: 5px;
	padding-right: 65px;
	background-color:#0175be;
	/*border-bottom: 1px solid #0175be;*/
	display: inline-block;
	cursor: pointer;
}


 /* *** Float containers fix: *** */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}

}

/* ===============================================================
   Ergänzungen 2026
   Design wie bisher; verbessert Handy, Tastatur und Lesbarkeit.
   =============================================================== */

/* --- Farben an einer Stelle --- */
:root {
  --blau: #013781;
  --blau-hell: #3677b7;
  --gruen: #007b3f;
  --text-grau: #444;      /* statt #666: ausreichender Kontrast auf grauem Grund */
}

/* --- Unsichtbar, aber für Screenreader lesbar --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- "Zum Inhalt springen" erscheint nur bei Tastaturbedienung --- */
.skip-link { position: absolute; left: -999em; }
.skip-link:focus {
  left: 1em; top: 1em; z-index: 3000;
  background: #fff; color: var(--blau); padding: .5em 1em; font-weight: 600;
}

/* --- Sichtbarer Tastatur-Fokus --- */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid #f8b830;
  outline-offset: 2px;
}

/* --- Bilder passen sich an, ohne zu springen --- */
img { max-width: 100%; height: auto; }

/* --- Etwas größere Schrift im Inhalt (vorher 13 px) --- */
.maincol p, .maincol li, .maincol td { font-size: .85em; }
.maincol li p, .maincol li li { font-size: 1em; }

/* --- Aktueller Menüpunkt --- */
#listmenu0 a[aria-current="page"] { background-color: var(--blau-hell); }
#listmenu1 a[aria-current="page"] { font-weight: 600; }

/* --- Menü-Schaltfläche: nur auf dem Handy sichtbar --- */
#menue-knopf { display: none; }

/* --- Weißer Kasten (z. B. Stadtlogo) --- */
.box-weiss { background-color: #fff; }
.box-weiss p { margin: 0; padding: 20px; line-height: 100%; }

/* --- Bereichsübersicht (Dienstleistung, Handel) --- */
.maincol ul.bereichsliste li { margin-bottom: .6em; }

/* --- Hinweistext über den Listen --- */
.maincol p.hinweis { color: var(--text-grau); font-size: .75em; }

/* --- Mitgliederliste als Karten (ersetzt die Tabellen) --- */
.maincol .firmenliste { list-style: none; margin: 1em 0; padding: 0; display: grid; gap: 1em; }
@media (min-width: 1300px) { .maincol .firmenliste { grid-template-columns: 1fr 1fr; } }
.maincol .firma { background: #ddd; margin: 0; font-size: .85em; line-height: 1.5; }
.maincol .firma[hidden] { display: none; }
.maincol .firma-name {
  background: var(--blau-hell); color: #fff; margin: 0;
  padding: .5em .7em; font-size: 1.15em; font-weight: 400; line-height: 1.3;
}
.maincol .firma-leistungen { padding: .6em .7em .7em; margin: 0; font-size: 1em; border-top: 1px solid #c4c4c4; }
.maincol .firma-adresse { font-style: normal; padding: .6em .7em; }
.maincol .firma-kontakt { list-style: none; margin: 0; padding: 0 .7em .6em; }
.maincol .firma-kontakt li { font-size: 1em; margin: 0; padding: .15em 0; }
.maincol .firma-kontakt .label { display: inline-block; min-width: 5.5em; color: var(--text-grau); font-size: .9em; }
.maincol .firma-kontakt a { color: var(--blau); display: inline-block; min-height: 24px; overflow-wrap: anywhere; }
.maincol .liste-filter input, .suchseite input {
  width: 100%; max-width: 24em; padding: .5em; font-size: 1em; border: 1px solid #868889;
}
.suchseite button { padding: .5em 1em; font-size: 1em; background: var(--gruen); color: #fff; border: 0; cursor: pointer; }
.maincol ul.suchtreffer { list-style: none; padding: 0; }
.maincol ul.suchtreffer span { color: var(--text-grau); }

/* --- Aufklapptexte (<details>) – ohne JavaScript, per Tastatur bedienbar --- */
details.mehr { margin-bottom: .8em; }
details.mehr summary { cursor: pointer; text-decoration: underline; margin-bottom: .6em; font-size: .85em; }
h2 + details.mehr summary, details.mehr + details.mehr summary { font-weight: 600; color: var(--blau); text-decoration: none; font-size: .95em; }

/* --- Großer Bildschirm: feste Fußleiste wie bisher, mit Platz darunter --- */
@media (min-width: 960px) {
  .content { padding-bottom: 80px; }
}

/* ===============================================================
   HANDY UND TABLET (bis 959 px Breite)
   =============================================================== */
@media (max-width: 959px) {
  /* Kopf: blaue Leiste, Logo links, Menü-Schaltfläche rechts, Suche darunter */
  #header {
    background: var(--blau); margin-top: 0; padding: 10px 0 12px;
  }
  #header .wrapper {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px;
  }
  #header .wrapper::before, #header .wrapper::after { display: none; }
  #logo-link { display: block; line-height: 0; }
  img#logo { float: none; width: 100%; max-width: 230px; height: auto; margin: 0; }
  p#slogan { display: none; }

  .js #menue-knopf {
    display: inline-flex; align-items: center; gap: 10px;
    background: transparent; color: #fff; border: 2px solid #fff; border-radius: 4px;
    font: inherit; font-size: 1rem; font-weight: 600; padding: 10px 14px; cursor: pointer;
    min-height: 48px;
  }
  #menue-knopf .striche,
  #menue-knopf .striche::before,
  #menue-knopf .striche::after {
    display: block; width: 22px; height: 3px; background: #fff; border-radius: 2px; position: relative;
  }
  #menue-knopf .striche::before, #menue-knopf .striche::after { content: ""; position: absolute; left: 0; }
  #menue-knopf .striche::before { top: -7px; }
  #menue-knopf .striche::after { top: 7px; }
  /* geöffnet: Striche werden zum X */
  #menue-knopf[aria-expanded="true"] .striche { background: transparent; }
  #menue-knopf[aria-expanded="true"] .striche::before { top: 0; transform: rotate(45deg); }
  #menue-knopf[aria-expanded="true"] .striche::after { top: 0; transform: rotate(-45deg); }

  #header #suche {
    grid-column: 1 / -1; position: static; display: flex; gap: 8px;
    width: auto; height: auto; padding: 0; background: none;
  }
  #header #suche #suchbegriff {
    flex: 1; float: none; width: auto; height: 44px; line-height: normal;
    font-size: 1rem; padding: 0 10px; border: 0;
  }
  #header #suche #sbutton {
    float: none; width: auto; height: 44px; line-height: normal;
    font-size: 1rem; padding: 0 16px; border: 0;
  }

  /* Menü: mit JavaScript zugeklappt, bis die Schaltfläche gedrückt wird */
  .content { margin-top: 0; }
  .js #hauptmenue:not(.offen) { display: none; }
  #hauptmenue { padding: 10px; margin-bottom: 15px; }
  nav ul#listmenu0 { display: block !important; }
  #listmenu0 li a:link, #listmenu0 li a:visited {
    line-height: 48px; height: 48px; font-size: 1.05rem; margin-bottom: 6px;
  }
  #listmenu1 { margin: 4px 0 10px; }
  #listmenu1 li a:link, #listmenu1 li a:visited {
    display: block; height: auto; line-height: 1.3; font-size: 1rem;
    padding-top: 9px; padding-bottom: 9px; margin-bottom: 4px;
  }
  #listmenu1 li { padding: 0; }

  /* Inhalt mit festem weißem Hintergrund – besser lesbar über dem Foto */
  .maincol, .leftcol { background-color: rgba(255, 255, 255, .95); }

  /* Fußleiste nicht mehr fest am Bildschirmrand (verdeckte Inhalt) */
  #footer { position: static; }
  ul#fussnavi li a { line-height: 2.6em; }
}

/* --- Weniger Bewegung, wenn im System so eingestellt --- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* --- Lange Adressen (z. B. Datenschutz) umbrechen statt seitlich zu scrollen --- */
.maincol a { overflow-wrap: anywhere; }

/* --- Kontaktzeilen mit Symbol statt Wort (Text bleibt für Screenreader) --- */
.maincol .firma-kontakt li { padding: .15em 0 .15em 1.6em; background: no-repeat left .4em / 1.05em 1.05em; }
.maincol .firma-kontakt .k-tel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.maincol .firma-kontakt .k-fax { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Crect x='2' y='9' width='20' height='9' rx='2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); }
.maincol .firma-kontakt .k-mail { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.maincol .firma-kontakt .k-web { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E"); }

/* --- Suchfeld im Kopf: größer und moderner (großer Bildschirm) --- */
@media (min-width: 960px) {
  #header #suche {
    display: flex; gap: 8px; align-items: center;
    width: 34%; max-width: 400px; box-sizing: border-box;
    padding: 12px 14px; border-radius: 0 0 8px 8px;
  }
  #header #suche #suchbegriff {
    float: none; flex: 1; width: auto; min-width: 0; height: 38px; line-height: normal;
    padding: 0 10px 0 34px; font-size: 15px; color: #222;
    border: 0; border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 10px center / 17px 17px;
  }
  #header #suche #suchbegriff::placeholder { color: #767676; }
  #header #suche #sbutton {
    float: none; width: auto; height: 38px; line-height: normal;
    padding: 0 16px; font-size: 15px; font-weight: 600;
    border: 0; border-radius: 6px; transition: background-color .15s;
  }
  #header #suche #sbutton:hover { background-color: #00964d; }
}
/* Abgerundete Ecken auch am Handy */
@media (max-width: 959px) {
  #header #suche #suchbegriff, #header #suche #sbutton { border-radius: 6px; }
}

/* --- Bereichs-Kacheln (Übersicht Dienstleistung und Handel) --- */
.maincol ul.kacheln { list-style: none; margin: 1.2em 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .maincol ul.kacheln { grid-template-columns: 1fr 1fr; } }
.maincol ul.kacheln li { margin: 0; padding: 0; font-size: 1em; }
.maincol a.kachel {
  display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box;
  padding: 14px 44px 14px 16px; position: relative;
  background: #fff; border-left: 5px solid var(--blau-hell); border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); text-decoration: none; color: #222;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.maincol a.kachel::after {
  content: "\203A"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 30px; line-height: 1; color: var(--blau-hell);
}
.maincol a.kachel:hover, .maincol a.kachel:focus-visible {
  border-left-color: var(--gruen); box-shadow: 0 4px 12px rgba(0,0,0,.18); transform: translateY(-2px);
}
.maincol a.kachel:hover::after { color: var(--gruen); }
.maincol .kachel-titel { font-size: 1.05em; font-weight: 600; color: var(--blau); line-height: 1.3; }
.maincol .kachel-text { font-size: .85em; color: var(--text-grau); line-height: 1.4; }
.maincol .kachel-zahl {
  align-self: flex-start; margin-top: 4px; font-size: .75em; font-weight: 600;
  color: #fff; background: var(--gruen); padding: 2px 8px; border-radius: 10px;
}

/* --- Akkordeon (Aufklapp-Kästen, z. B. Heimat shoppen) --- */
.maincol .akkordeon-liste { counter-reset: grund; margin: 1em 0 1.5em; }
.maincol details.akkordeon {
  background: #fff; border-left: 5px solid var(--blau-hell); border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); margin-bottom: 10px;
}
.maincol details.akkordeon summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; font-weight: 600; color: var(--blau); font-size: .95em; line-height: 1.35;
}
.maincol details.akkordeon summary::-webkit-details-marker { display: none; }
.maincol details.akkordeon summary::before {
  counter-increment: grund; content: counter(grund);
  flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--blau-hell); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .9em;
}
.maincol details.akkordeon summary::after {
  content: "+"; margin-left: auto; flex: 0 0 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--blau-hell); color: var(--blau-hell); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 400; line-height: 1;
}
.maincol details.akkordeon[open] summary::after { content: "\2212"; background: var(--blau-hell); color: #fff; }
.maincol details.akkordeon summary:hover { background: #eef4fb; }
.maincol details.akkordeon[open] { border-left-color: var(--gruen); }
.maincol details.akkordeon[open] summary::before { background: var(--gruen); }
.maincol details.akkordeon > p { margin: 0; padding: 0 14px 14px 54px; }
.maincol details.akkordeon summary, .maincol details.akkordeon summary::before, .maincol details.akkordeon summary::after { text-decoration: none; }
.maincol details.akkordeon > p { color: #222; }

/* --- Facebook: Button unter dem Menü und Symbol in der Fußzeile --- */
.fb-symbol { display: block; flex: 0 0 auto; }
a.fb-knopf {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px;
  background: #1458b8; color: #fff; border-radius: 6px; text-decoration: none;
  font-weight: 600; font-size: 14px; line-height: 1.3; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: background-color .15s;
}
a.fb-knopf .fb-symbol { width: 26px; height: 26px; padding: 4px; box-sizing: border-box; background: #fff; color: #1458b8; border-radius: 50%; }
a.fb-knopf:hover, a.fb-knopf:focus-visible { background: #0d468f; color: #fff; }
#footer a.fb-fuss {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 26px; height: 26px; margin-left: 10px; background: #fff; color: #1458b8; border-radius: 4px;
}
#footer a.fb-fuss .fb-symbol { width: 18px; height: 18px; }
@media (max-width: 959px) { a.fb-knopf { font-size: 1rem; min-height: 48px; box-sizing: border-box; } }

/* --- Bildvergrößerung (class="bigger", siehe skripte/site.js) --- */
button.bigger-knopf { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; max-width: 100%; }
button.bigger-knopf img { display: block; }
button.bigger-knopf::after {
  content: "\2922  Vergrößern"; position: absolute; right: 8px; bottom: 8px;
  background: rgba(0,0,0,.65); color: #fff; font-size: 13px; padding: 4px 8px; border-radius: 4px;
}
dialog.bildbox {
  border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; cursor: zoom-out;
}
dialog.bildbox::backdrop { background: rgba(0,0,0,.85); }
dialog.bildbox img { display: block; max-width: 96vw; max-height: 92vh; width: auto; height: auto; box-shadow: 0 4px 30px rgba(0,0,0,.5); }
dialog.bildbox .bildbox-zu {
  position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #fff; background: #013781; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
}
@media (max-width: 600px) { dialog.bildbox .bildbox-zu { top: 6px; right: 6px; } }