/*! https://www.hch-ev.de  
/*! CSS | main23 | 2025 | 
/*! Webdesign Christian Netz | https://www.christian-netz.de 
*/
* body{font-family:Candara,Helvetica,sans-serif;line-height:1.5em;line-height:1.5rem;color:#666;margin-left:auto;margin-right:auto;hyphens:auto;hyphenate-limit-chars:8 4 4;}
/* word-wrap:break-word */
#background_wrap{z-index:-1;position:fixed;top:0;left:0;height:100%;width:100%;background-size:100% 100%;background-image:url(../bilder/hintergrund/hintergrund-hch-cuba-bild1.jpg);background-repeat:no-repeat;background-attachment:scroll;}
.scroll-indicator{position:fixed;top:0;z-index:1;width:100%;background-color:#f1f1f1;}
.progress-container{width:100%;height:8px;background:#ccc;}
.progress-bar{height:8px;background:red;width:0%;}
html{font-size:16px;scroll-behavior:smooth;}

/* 1. Flexbox-Fallback für alte Browser */
#header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5%;
  gap: 20px;
  /* background-color: #f0f0f0; */
}

#header-top img {
  max-height: 200px;
}

#header-top .text {
  text-align: center;
  flex: 1;
}

/* Tablet-Fallback: Logos untereinander, Text rechts */
@media (max-width: 1024px) {
  #header-top {
    flex-wrap: wrap;
  }

  .logo1, .logo2 {
    width: auto;
    margin-bottom: 10px;
  }

  .text {
    width: 90%;
    text-align: center;
  }
}

/* Handy-Fallback: nur erstes Logo + Text darunter */
@media (max-width: 600px) {
  .logo2, #bilder-header {
    display: none;
  }

  #header-top {
    flex-direction: column;
    align-items: center;
  }

  .text {
    margin-top: 10px;
  }
}

/* 2. CSS Grid für moderne Browser */
@supports (display: grid) {
  #header-top {
    display: grid;
    grid-template-columns: 25% 50% 25%; /* Desktop: Logo1 25% | Text 50% | Logo2 25% */
    /* grid-template-columns: auto 1fr auto; /* Desktop */
    align-items: center;
    padding: 10px 5%; /* mehr Abstand zu den Seiten */
  }

  @media (max-width: 1024px) {
    #header-top {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto auto;
    }

    .logo1 { grid-column: 1; grid-row: 1; }
    .logo2 { grid-column: 1; grid-row: 2; }
    .text   { grid-column: 2; grid-row: 1 / span 2; text-align: center; }
  }

  @media (max-width: 600px) {
    #header-top {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto;
    }

    .logo1 { grid-column: 1; grid-row: 1; }
    .logo2, #bilder-header { display: none; }
    .text   { grid-column: 1; grid-row: 2; margin-top: 10px; text-align: center; }
    .logo1, .logo2, .text {padding:0;margin: 0 auto}
    .logo1 {
    display: block;      /* wichtig zum Zentrieren */
    margin: 0 auto;      /* zentriert horizontal */
  }
  }
}

a.skip-main{left:-999px;position:absolute;top:auto;width:1px;height:1px;overflow:hidden;z-index:-999;}
a.skip-main:active, a.skip-main:focus{color:#000;background-color:#fff;left:10px;top:10px;width:auto;height:auto;margin:10px 10px;padding:1em;border:4px solid red;font-size:2em;z-index:999;}
img{max-width:100%;height:auto;margin-right:2%;margin-bottom:1%;}
.bild_vergroessern{width:48px;height:48px;background:#fff;color:#fff;text-decoration:none;}
.bild_vergroessern:before{content:'';background:url("/button/icons/FontAwesome_f00e(0)_48.png") no-repeat;background-size:cover;position:absolute;width:48px;height:48px;margin-left:-48px;}
h1, .pseudo-h1{font-size:42px;font-size:2.625rem;line-height:1.2em;}
h2, .pseudo-h2{font-size:26px;font-size:1.625rem;line-height:1.2em;}
h3{font-size:21px;font-size:1.3125rem;line-height:1.2em;}
h4{font-size:18px;font-size:1.125rem;line-height:1.2em;}
p, li, summary{font-size:18px;font-size:1.125rem;line-height:1.5em;line-height:1.5em;}
.summary-h2{font-size:26px;font-size:1.625rem;line-height:1.2em;color:#8a0a01;}
a{word-wrap:break-word;overflow-wrap:anywhere;}
h1, .pseudo-h1{color:#8a0a01;}
h2, .pseudo-h2{color:#484743;}
/*color:#31435c*/
h3, h4{color:#484743;}
h1, h2, h3, h4, .pseudo-h1, .pseudo-h2{font-weight:bold;}
hr{border:1px solid silver;}
.button{font-family:Candara,sans-serif;}
.button{display:inline-block;padding:8px 24px;border:1px solid silver;border-radius:2px;box-sizing:border-box;text-decoration:none;font-size:18px;font-size:1.125rem;color:#000;background-color:#f3e6ac;transition:all .2s;}
.button:hover{color:#fff;background-color:#8a0a01;}
.button-news:hover{color:white;background-color:red;}
.datum{font-weight:700;font-style:italic;}
.pagination{display:inline-block;max-width:100%;}
.pagination a{color:black;background-color:lightgrey;float:left;padding:8px 16px;margin:8px 8px;text-decoration:none;}
.pagination a:hover{color:white;background-color:cornflowerblue;}
.red{color:red;}
#pagewrap{padding:5px;width:80%;max-width:1500px;margin-left:auto;margin-right:auto;overflow:hidden;}
#oben{text-align:center;}
#contentheader{position:relative;}
.eins{width:25%;float:left;}
.zwei{width:30%;float:left;margin:1em 4em 2em;position:relative;}
.drei{width:25%;float:left;}
#contentimportant{position:relative;}
.center{float:left;width:100%;position:relative;padding:0 20px;margin:.5em 1em 1em;}
@media screen and (max-width: 1900px) {
.center{margin:0.5em auto;}
}
/* XX header{height:auto;padding:1em 0 0em;margin:0 1em 0em;} */
/* header{height:auto;padding:16px 0 0;margin:0 16px 0 0;}  */
header{background-color:white;}
#content{width:20%;float:right;padding:5px 15px;}
#middle-wrap{padding:0;}
#middle{background-color:#fff;width:60%;float:left;padding:1em 5em 2em 6em;margin:0 1em 1em;}
#middle h1, #middle .pseudo-h1, #middle h2, #middle h3, #middle h4{padding:0;}
#middle h2{padding:2% 0% 0 0%;}
#middle p, #middle pre, #middle table{padding :0 0% 0 2%;text-align:left;list-style-position:inside;}
#middle blockquote{padding:24px 16px 16px 28px;text-align:left;font-style:italic;background-color:#dfe7f0;border-left:3px solid red;font-size:18px;}
#middle blockquote::before{content:"\201C";font-family:Georgia, serif;font-size:60px;font-weight:bold;color:rgb(0, 0, 0);left:-15px;top:0px;position:relative;display:block;}
#middle blockquote::after{content:"";}
.middlep{margin-left:2%;}
/* fuer ajax function Einbindung Videos gleicher Abstand */
#middle table{text-align:left;}
div.flex-item-middle-left p, div.flex-item-middle-right p{padding:0 2% 0 4%!important;}
div.flex-item-middle-left h2, div.flex-item-middle-right h2{padding:0 2% 0 0%!important;}
div.flex-item-middle-left h3, div.flex-item-middle-right h3{padding:0 2% 0 0%!important;}
#middle li{list-style-position:outside;}
#middle ol li ol li, #middle ul li ul li{margin:0 15% 0 0;}
#middle p img{padding-left:0;}
#middle img{padding-left:0;}
/* .flex-container-middle*/
.flex-container-middle{display:flex;flex-wrap:wrap;}
.flex-item-middle-left{flex:50%;}
.flex-item-middle-right{flex:50%;}
@media (max-width: 800px) {
.flex-item-middle-right, .flex-item-middle-left{flex:100%;}
}
/* Karten */
.fx-wrapper{display:flex;flex-wrap:wrap;gap:20px;padding:20px;}
.fx-card{flex:0 0 calc(50% - 20px);box-sizing:border-box;padding:20px; /* 3D-Card-Effekt */background:rgba(255,255,255,0.12);border-radius:12px;border:1px solid rgba(255,255,255,0.25);box-shadow:0 5px 12px rgba(0,0,0,0.25), 0 10px 25px rgba(0,0,0,0.20);backdrop-filter:blur(3px);}
@media (max-width: 720px) {
.fx-card{flex:0 0 100%;}
.fx-wrapper{padding:20px 6px;}
}
.wichtig{margin-left:2%;border-left:6px red solid;}
p.wichtig{padding:0 0% 0 4%!important;}
.darum-gehts{padding:0 1em 1em 1em;background-color:#dfe7f0;}
#sidebar{display:none;width:5%;padding:5px 15px;float:left;}
summary{padding-left:0px;}
video{width:100% !important;height:auto !important;display:block;}
footer{clear:both;padding:0 15px;}
.schatten{-webkit-box-shadow:10px 10px 50px dimgrey;-moz-box-shadow:10px 10px 50px dimgrey;-o-box-shadow:10px 10px 50px dimgrey;-ms-box-shadow:10px 10px 50px dimgrey;box-shadow:1em 1em 50px dimgrey;}
.one, .two, .three, .four, .fife, .six, .zero{min-height:18em;float:left;margin:2em 1em;padding:2em 1em;font-size:large;-webkit-box-shadow:10px 10px 50px dimgrey;-moz-box-shadow:10px 10px 50px dimgrey;-o-box-shadow:10px 10px 50px dimgrey;-ms-box-shadow:10px 10px 50px dimgrey;box-shadow:1em 1em 50px dimgrey;}
/* font-weight:700; */
.zero{background-color:#fff;color:#404e5c;}
.one{background-color:#484743;color:#fff;}
.two{background-color:#8a0a01;color:#fff;}
.three{background-color:#31435c;color:#fff;}
.four{background-color:#db3a1d;color:#fff;}
/*background-color:#e59c35*/
.fife{background-color:#436238;color:#fff;}
.six{background-color:#3f4a56;color:#fff;}
/*background-color:#708090*/
.tierschutz-orange{color:#ff9900;}
.tierschutz-blau{color:#2E74B5;}
/* galerie */
.zoom-icon{background-image:url(/assets/zoom.png);background-repeat:no-repeat;background-size:contain;height:24px;width:24px;background-color:#fff;}
.bildbeschreibung{font-style:italic;}
.bild-unterschrift{font-style:italic;position:relative;top:-16px;top:-1rem;}
@media screen and (max-width: 1900px) {
html{background-color:red;}
#pagewrap{width:94%;}
#content{width:22%;padding:1% 2%;}
#middle{width:60%;padding:1% 2% 1% 6%;float:left;}
#sidebar{display:none;clear:both;padding:1% 4%;width:auto;float:none;}
.one, .two, .three, .four, .fife, .six, .zero{margin:1em;width:80%;}
footer{padding:1% 4%;}
}
@media screen and (max-width: 1009px) {
html{background-color:#ff0;}
#pagewrap{width:94%;}
#content{width:auto;padding:1% 4%;}
#middle{width:auto;padding:1% 4%;float:left;}
#sidebar{display:none;clear:both;padding:1% 4%;width:auto;float:none;}
footer{padding:1% 4%;}
.eins{width:40%;float:left;}
.zwei{float:right;margin: 80p 120px 40px 64px;}
.drei{width:40%;float:left;}
}
@media screen and (max-width: 767px) {
html{background-color:orange;}
.zwei{margin: 64px;}
#content{width:auto;float:none;}
/* XX #middle{width:auto;float:none;margin:0 0em 0 1em;} */
#middle{width:auto;float:none;margin:0;}
#sidebar{width:auto;float:none;}
}
@media screen and (max-width: 479px) {
#pagewrap{width:auto;}
/* .drei, .zwei, #bilder-header{display:none;}  */
html{background-color:green;}
/* header{height:auto;}  */
h1, .pseudo-h1{font-size:2em;}
#sidebar{display:none;}
#middle p, #middle pre{text-align:left;}
}
#content{background:#f8f8f8;}
#sidebar{background:#f0efef;}
header, #sidebar, footer{border:solid 1px #ccc;width:100%;}
#pagewrap, #middle, #content{border:solid 1px #ccc;}
#navigation{z-index:999;}
ul#css3menu1, ul#css3menu1 ul{margin:0;list-style:none;padding:0;background-color:#fff;border-width:0;border-style:solid;}
ul#css3menu1 ul{display:none;position:absolute;left:0;top:100%;background-color:#FFF;border-width:2px;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-style:solid none none;border-color:#E62E0D;-moz-box-shadow:rgba(0,0,0,0.2) 4px 4px 0;-webkit-box-shadow:rgba(0,0,0,0.2) 4px 4px 0;box-shadow:rgba(0,0,0,0.2) 4px 4px 0;padding:0;}
/* 2022 01 11 rausnehmen fuer Aenderung mobile NAV */
ul#css3menu1 li:hover > *{display:block;}
/* 04.01.2020 NEU: fuer Tastaturtab und Menuepunkte blaettern*/
ul#css3menu1 li:focus-within > *{display:block;}
ul#css3menu1 li{position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{z-index:9;}
/* 26.04.2022 z-index:1 */
ul#css3menu1 li:focus-within{z-index:9;}
/* 26.04.2022 z-index:1 / 04.01.2020 NEU */
ul#css3menu1{font-size:0;z-index:999;position:relative;display:inline-block;padding:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;display:inline;}
* html ul#css3menu1 li a{display:inline-block;}
ul#css3menu1 > li{margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{outline-style:groove;outline-color:#E62E0D;}
ul#css3menu1 a{display:block;vertical-align:middle;text-align:left;text-decoration:none;font:16px Candara,sans-serif;color:#FFF;cursor:pointer;padding:2px 15px 5px 5px;background-repeat:repeat;border-width:0;border-style:none;}
ul#css3menu1 ul li{float:none;margin:0;}
ul#css3menu1 ul a{text-align:left;padding:10px 13px;background-color:#FFF;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;color:#2C3736;text-decoration:none;}
ul#css3menu1 li:hover > a, ul#css3menu1 li a.pressed{border-style:none;color:#67B7E1;}
ul#css3menu1 img{border:none;vertical-align:middle;margin-right:18px;}
ul#css3menu1 span{display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:16px;}
ul#css3menu1 > li.switch{display:none;cursor:pointer;width:25px;height:20px;padding:18px 15px 21px 5px;}
ul#css3menu1 > li.switch:before{content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#2C3736;-moz-box-shadow:0 8px #2C3736,0 16px #2C3736;-webkit-box-shadow:0 8px #2C3736,0 16px #2C3736;box-shadow:0 8px #2C3736,0 16px #2C3736;}
ul#css3menu1 > li.switch:hover:before{background:#E62E0D;-moz-box-shadow:0 8px #E62E0D,0 16px #E62E0D;-webkit-box-shadow:0 8px #E62E0D,0 16px #E62E0D;box-shadow:0 8px #E62E0D,0 16px #E62E0D;}
.c3m-switch-input{display:none;}
ul#css3menu1 li:hover > a, ul#css3menu1 li > a.pressed{border-style:none;color:#67B7E1;text-decoration:none;}
ul#css3menu1 ul li:hover > a, ul#css3menu1 ul li > a.pressed{background-color:#E62E0D;color:#FFF;text-decoration:none;}
ul#css3menu1 li.topmenu > a{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;color:#2C3736;}
ul#css3menu1 li.topmenu:hover > a, ul#css3menu1 li.topmenu > a.pressed{color:#E62E0D;}
@media screen and (max-width: 801px) {
ul#css3menu1 > li{position:initial;}
ul#css3menu1 ul .submenu, ul#css3menu1 li > ul{left:0;right:auto;top:100%;}
ul#css3menu1 .submenu, ul#css3menu1 ul, ul#css3menu1 .column{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding-right:0;width:100%!important;}
}
@media screen and (max-width: 800px) {
ul#css3menu1{width:100%;}
ul#css3menu1 > li{display:none;position:relative;width:100%!important;}
ul#css3menu1 > li.switch, .c3m-switch-input:checked + ul#css3menu1 > li + li{display:block;}
ul#css3menu1 > li.switch > label{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;}
}
.one a:link, .two a:link, .three a:link, .four a:link, .fife a:link, .six a:link{color:#fff;}
.one a:visited, .two a:visited, .three a:visited, .four a:visited, .fife a:visited, .six a:visited{color:#fff;}
.one a:hover, .two a:hover, .three a:hover, .four a:hover, .fife a:hover, .six a:hover{color:#fff;}
.one a:active, .two a:active, .three a:active, .four a:active, .fife a:active, .six a:active{color:#fff;}
.bild-fixiert{margin:1em;padding:2em;z-index:998;float:none;}
.tabelle{font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;width:100%;display:block;overflow:auto;}
.tabelle td, .tabelle th{border:1px solid #ddd;padding:8px;}
.tabelle tr:nth-child(even){background-color:#f2f2f2}
.tabelle tr:hover{background-color:#ddd;}
.tabelle th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4CAF50;color:#fff;}
.links{float:left;padding-left:9%;}
.hch{font-weight:700;}
#kategorien h2{color:#fff;margin-top:1px;font-size:24px;font-size:1.5rem;}
#kategorien ul{padding-left:1em;}
#kategorien ul{list-style:disc;}
#kategorien ul{list-style-position:outside;}
/* details, */
.zero h2{color:#404e5c!important;}
/* summary {margin-left:9%; font-weight:bold} */
/* details p { margin-left: 0; padding-left: 2% !important} */
.neu::before{color:red;font-weight:bold;content:"NEU: ";}
/* details / summary */
summary{color:red;font-weight:700;}
details.description[open] summary::after{content:attr(data-open);}
details.description:not([open]) summary::after{content:attr(data-close)}
/* ### FLEXBOX ### */
#hch-hinweise h2{margin-top:1px;}
#hch-hinweise h3{color:#fff;margin-top:1px;}
.flex-container{display:flex;flex-direction:row; /* row = Standardwert | column*/;align-items:stretch; /* Standardwert */;justify-content:center; /*  space-between*/;flex-wrap:wrap;}
.flex-item{flex-grow:0;flex-shrink:1;flex-basis:220px;}
.flex-container-kontakt{display:flex;flex-wrap:wrap;justify-content:space-between;}
.flex-kontakt{flex:0 1 30em;}
.flex-kontakt h3{margin-top:0;}
.flex-bild{flex:0 1 auto;}
@media all and (max-width: 660px){
.flex-kontakt{order:2;}
.flex-bild{order:1;}
}
@media all and (max-width: 500px) {
.flex-container{flex-direction:column;}
.flex-item{flex-basis:100%;}
}
/* ### ENDE FLEXBOX ### */
.pdfbildwechsel{display:block;height:64px;height:4em;background:url(/bilder/pdf.jpg);background-repeat:no-repeat;}
.pdfbildwechsel:hover{background:url(/bilder/pdf-gross.jpg);background-repeat:no-repeat;}
/* CN ERGAENZUNG Menue */
.cn-show{display:block!important;z-index:1;}
.cn-not-show{display:block!important;}
/* ul#css3menu1 li {white-space: normal} */
@media screen and (max-width: 768px) {
/*ul#css3menu1 li {white-space: normal;}*/
ul#css3menu1 li > ul, ul#css3menu1 li > ul > li > ul{position:relative!important;float:right;width:90%!important; 
	/* left: 50px!important; width: 90%!important; */}
ul.tippziele-groesser li{margin-bottom:10px!important;}
}
@media screen and (max-width: 500px) {
/*ul#css3menu1 li {white-space: normal;}*/
ul#css3menu1 li > ul, ul#css3menu1 li > ul > li > ul{width:100%!important;}
}
/* frame fuer eingebundene Videos */
.wrap-iframe{position:relative;overflow:hidden;padding-top:56.25%;}
.wrapped-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
@media (max-width: 260px) * {
word-break: break-all}
.summary-quartal{background-color: #EE0000; color: white; padding: 8px; border-radius: 5px; margin-bottom: 16px; width: fit-content;}
.summary-quartal:hover{background-color:firebrick;cursor:pointer;}
/* svg */
.svg-icon{vertical-align:middle;margin-right:8px;}
/* Zitat */
.quote{background:#fff;border-left:5px solid #888;padding:1em 1.5em;margin:2em;max-width:600px;font-style:italic;position:relative;border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.1);}
@media screen and (max-width: 600px) {
.quote{margin:0 4% 0 4%;}
}
.quote::before{content:"“";font-size:4em;color:#888;position:absolute;top:0px;left:10px;line-height:1;font-family:serif;}
.quote{padding:2em 1.5em 1em 1.5em; /* mehr Platz oben */}
.quote p{margin:0.8em 0;}
.quote-footer{font-style:normal;text-align:right;margin-top:1em;font-size:0.9em;color:#666;}
.quote-author::before{content:"— ";}
.quote-source{font-style:italic;display:block;}
.clear{clear:both;}