:root{
  --inner-padding-vert:40px;
  --inner-padding-hori:0;

  --logofarbe: #1A5291;
  --link-color-on-white: #1A5291;/* aehnlich Logofarbe */

  --admin-color:#1A5291;
  --bg-grau: #f3f3f3;/* #403F41  */
  --grau1:#666;

  --button-logofarbe: #1A5291;/* aehnlich Logofarbe */
  --button-logofarbe-hover: #D58A00;/* aehnlich Logofarbe */

  --button-orange:#ff9722;
  --button-orange-hover:#E6AA68;
  
  --button-rot:#B6483D;
  --button-rot-hover:#C9695F;

  --button-gruen:#457B33;
  --button-gruen-hover:#5EA545;

  --button-hellgrau: #999;
  --button-dunkelgrau:#666;

  --badgefarbe: #098217;

  --font-text:    'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-header:  'Open Sans Condensed', Arial, Helvetica, sans-serif;
}

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em,
img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input,
table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:0; margin:0;}
html {-webkit-text-size-adjust:100%; -webkit-font-smoothing: antialiased;}
hr {clear:both; display:block; width:100%; /*border:none; height:1px; position:relative; left:-9999em;*/}
a:focus, a:hover, a:active {text-decoration: none;}
h1, h2, h3, h4, h5, h6 {font-weight:normal; margin:0;}
ul, ol {list-style:none;}
.main img {max-width:100%; height:auto; display:block;}


/* open-sans-condensed-300 - latin */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'),
       url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-300.svg#OpenSansCondensed') format('svg'); /* Legacy iOS */
}
/* open-sans-condensed-700 - latin */
@font-face {
  font-family: 'Open Sans Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Condensed Bold'), local('OpenSansCondensed-Bold'),
       url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/site/templates/fonts/open-sans/open-sans-condensed-v12-latin-700.svg#OpenSansCondensed') format('svg'); /* Legacy iOS */
}



/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('/site/templates/fonts/open-sans/open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('/site/templates/fonts/open-sans/open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Italic'), local('OpenSans-Italic'),
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('/site/templates/fonts/open-sans/open-sans-v15-latin-600.eot'); /* IE9 Compat Modes */
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-600.woff') format('woff'), /* Modern Browsers */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/site/templates/fonts/open-sans/open-sans-v15-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}


html {font-size: 62.5%;}
body {
  font-size:16px; font-size:1.6rem;/* px wegen Fallback */
  -webkit-text-size-adjust: 100%;
  color:#111; font-weight:normal;
  line-height:1.4;
  font-family: var(--font-text);
  }





.bg-image   {background-repeat:no-repeat; background-size:cover; background-position:center center;}
.bg-contain {background-size:contain;}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   Mini Framework
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body {width:100vw;}
.inner        {width:90%; max-width:1300px; margin:0 auto;}
.wrappo       {margin:0 auto;}/* wrappo hat das style=width:60% usw... */


/* Grid ################################################################## */
.griddo          {display:grid; grid-gap:clamp(20px, 10vw, 60px);}

.griddo.gapmod-0 {grid-gap:0;}
.griddo.gapmod-1 {grid-gap:1rem;}
.griddo.gapmod-2 {grid-gap:clamp(14px, 10vw, 20px);}
.griddo.gapmod-3 {grid-gap:clamp(20px, 2vw, 30px);}
.griddo.gapmod-4 {grid-gap:clamp(20px, 3vw, 40px);}
.griddo.gapmod-5 {grid-gap:clamp(20px, 3vw, 50px);}
.griddo.gapmod-6 {grid-gap:clamp(20px, 3vw, 60px);}
.griddo.gapmod-7 {grid-gap:clamp(20px, 5.5vw, 70px);}
.griddo.gapmod-8 {grid-gap:clamp(20px, 5.5vw, 80px);}
.griddo.gapmod-9 {grid-gap:clamp(20px, 5.5vw, 90px);}
.griddo.gapmod-10{grid-gap:clamp(20px, 6vw, 100px);}

.testo .griddo {margin-bottom:3px;}
.testo .griddo div {background:#EEE; padding:10px;}

/* Spalten allgemein */
.col-count-1 {grid-template-columns: repeat(1, 1fr);}
.col-count-2 {grid-template-columns: repeat(2, 1fr);}
.col-count-3 {grid-template-columns: repeat(3, 1fr);}
.col-count-4 {grid-template-columns: repeat(4, 1fr);}
.col-count-5 {grid-template-columns: repeat(5, 1fr);}
.col-count-6 {grid-template-columns: repeat(6, 1fr);}
.col-count-7 {grid-template-columns: repeat(7, 1fr);}
.col-count-8 {grid-template-columns: repeat(8, 1fr);}
.col-count-9 {grid-template-columns: repeat(9, 1fr);}
.col-count-10{grid-template-columns: repeat(10, 1fr);}

/* gapmod-X muss im HTML gesetzt werden  */
.col-10-90   {grid-template-columns:10% 1fr;}
.col-20-80   {grid-template-columns:20% 1fr;}
.col-30-70   {grid-template-columns:30% 1fr;}
.col-40-60   {grid-template-columns:40% 1fr;}
.col-60-40   {grid-template-columns:1fr 40%;}
.col-70-30   {grid-template-columns:1fr 30%;}
.col-80-20   {grid-template-columns:1fr 20%;}

.col-20-20-60   {grid-template-columns:20% 20% 1fr;}
.col-60-20-20   {grid-template-columns:1fr 20% 20%;}
.col-20-60-20   {grid-template-columns:20% 1fr 20%;}


@media only screen and (max-width: 800px) {
  .col-20-20-60   {grid-template-columns:1fr 1fr 1fr;}
}

@media only screen and (max-width: 560px) {
  .wrappo {width:100% !important;}/* wrappo hat das style=width:60% usw... */
  .col-count-2 {grid-template-columns: 1fr;}
  .col-count-3 {grid-template-columns: 1fr;}
  .col-count-4 {grid-template-columns: 1fr;}
  .col-count-5 {grid-template-columns: 1fr;}
  .col-count-6 {grid-template-columns: 1fr;}

.col-10-90, .col-20-80, .col-30-70, .col-40-60, .col-60-40, .col-70-30, .col-80-20,
.col-20-20-60, .col-60-20-20, .col-20-60-20 {grid-template-columns:1fr;}

}

.pw-7 {padding-left:7rem;}
.w-3-2 {grid-template-columns:35% auto;}
.w-2-3 {grid-template-columns:auto 35%;}


/* Flexbox ################################################################## */
.flexo {
  width:100%;
  display: -ms-flexbox; display: -webkit-flex; display: flex;  
 -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
 -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;
 -webkit-align-content: stretch;  -ms-flex-line-pack: stretch; align-content: stretch;
 -webkit-align-items: stretch;  -ms-flex-align: stretch; align-items: stretch;
 -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}

.flexo.verto        {-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.flexo.flexo-start  {-webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start;}
.flexo.flexo-end    {-webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end;}

/* horizontale Elemente vertikal zentriert ***************************
  Bei mehr als 1 Element sollte es mit einem DIV umgeben werden 
  <div class="flexo flexo-vetro-zentro flexo-right text-right">
    <div>...<h1></h1><p></p>...
*/
.flexo-verto-zentro {align-items: center;      /* Vertikal zentriert */}
.flexo-verto-bottom {align-items: flex-end;    /* Vertikal unten */}
.flexo-verto-toppo  {align-items: flex-start;  /* Vertikal oben  */}

/* Richtet umschliessende Box aus */
.flexo-left         {justify-content:left;}/* ist eh default */
.flexo-right        {justify-content:flex-end;}
.flexo-center       {justify-content:center;}

/* Richtet Text darin aus */
.text-left          {text-align:left;}
.text-right         {text-align:right;}
.text-center        {text-align:center;}
.text-uppercase     {text-transform:uppercase;}
.text-lowercase     {text-transform:lowercase;}

img.align_left    {float:left; margin:5px 20px 5px 0;}
img.align_right   {float:right; margin:5px 0 5px 20px;}
img.align_center  {margin:10px auto;}
@media only screen and (max-width:700px){
  .content img.align_left, .content img.align_right {width:40%; height:auto;}
}

/* gefällt mir nicht... */
p.align_left    {clear:both; float:left;}
p.align_right   {clear:both; float:right;}
p.align_center  {clear:both; text-align:center;}

/* Button im TinyMCE */
hr.clearboth    {clear:both; height:1px; margin:0; padding:0; border:none;}






/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   Helper Classes
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* SVG für den Indic, clicky-menu */
svg[hidden]       {display: none; position: absolute;}
.centerme         {text-align:center; display:block; width:100%;}
.bg-image         {background-repeat:no-repeat; background-size:cover;}
/* nur shade ohne was */
.boxed            {border:1px solid #eaeaea; border-right-width:2px; border-bottom-width:2px;}



/* *******************************************
   Icons Remix
 ******************************************* */
i.ri-logocolor {color:var(--logofarbe) !important;}

/* Text zu den Icons */
[class^="ri-"] span, [class*="ri-"] span {display:none;}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   Button
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Button Styles allgemein */
button                {border:none;}
.button               {display:inline-block; padding:7px 20px; margin:1px 3px 2px 0; transition:all 0.2s;}
.button               {font-size:1.6rem; text-decoration:none !important; font-weight:600; text-align:center;}
.button, button       {outline-offset:2px;}

.button:focus, button:focus {outline-width:2px; outline-style:solid; transition:all 0.2s;}


/* Größen */
.button.large         {padding:10px 25px; font-size:1.7rem;}
.button.xlarge        {padding:12px 30px; font-size:1.8rem;}
.button.xxlarge       {padding:14px 35px; font-size:1.85rem;}
.button.small         {padding:5px 15px;  font-size:1.4rem;}
.button.xsmall        {padding:4px 8px;   font-size:1.3rem;}
.button.xxsmall       {padding:3px;       font-size:1.2rem;}
.button.barebone      {padding:7px 3px 0 3px;}

.button.wide          {padding-left:30px; padding-right:30px;}
.button.wide40        {padding-left:40px; padding-right:40px;}
.button.wide50        {padding-left:50px; padding-right:50px;}
.button.wide60        {padding-left:60px; padding-right:60px;}
.button.wide80        {padding-left:80px; padding-right:80px;}
.button.wide100       {width:100%;}


/* Standardfarbe */
.button, .button.logofarbe              {background-color:var(--button-logofarbe); color:#FFF; outline-color:#000; }
.button:hover, .button.logofarbe:hover  {background-color:var(--button-logofarbe-hover); color:#FFF; text-decoration:none !important;}

/* Orange */
.button.button-orange           {background-color:var(--button-orange); color:#000 !important; border:1px solid var(--button-orange); outline-color:var(--button-orange);}
.button.button-orange:hover     {background-color:var(--button-orange-hover); color:#FFF !important; border-color:var(--button-orange-hover); text-decoration:none !important;}

/* Rot */
.button.button-rot              {background-color:var(--button-rot); color:#FFF !important; outline-color:var(--button-rot);}
.button.button-rot:hover        {background-color:var(--button-rot-hover); color:#FFF !important; text-decoration:none !important;}

/* Gruen */
.button.button-gruen            {background-color:var(--button-gruen); color:#FFF !important; border:1px solid #589E41; outline-color:var(--button-gruen);}
.button.button-gruen:hover      {background-color:var(--button-gruen-hover); color:#FFF !important; text-decoration:none !important;}

/* Klar */
.button.klar                    {background-color:transparent; color:#444 !important; border:1px solid #999; outline-color:#444;}
.button.klar:hover              {background-color:transparent; color:var(--link-color-on-white) !important; border-color:#444; text-decoration:none !important;}
/* Klar auf dunklem Hintergrund */
.button.klar-auf-dunkel         {background-color:transparent; color:#CCC !important; border:1px solid #AAA; outline-color:var(--logofarbe);}
.button.klar-auf-dunkel:hover   {background-color:transparent; color:var(--logofarbe) !important; border-color:var(--logofarbe); text-decoration:none !important;}

/* Weiss */
.button.button-weiss            {background-color:#FFF; color:#444 !important; border:1px solid #999; outline-color:#666;}
.button.button-weiss:hover      {background-color:#DADADA; color:#111 !important; text-decoration:none !important;}

.button.button-hellgrau         {background-color:#999; color:#FFF !important; outline-color:#999;}
.button.button-hellgrau:hover   {background-color:#AAA; color:#333 !important; text-decoration:none !important;}

.button.button-dunkelgrau       {background-color:var(--grau1); color:#FFF !important; outline-color:#666;}
.button.button-dunkelgrau:hover {background-color:#999; color:#FFF !important; text-decoration:none !important;}

/* Schwarz */
.button.button-schwarz          {background-color:#222; color:#EEE !important; outline-color:#666;}
.button.button-schwarz:hover    {background-color:#666; color:#FFF !important; text-decoration:none !important;}

.button.barebone                {color:var(--link-color-on-white); background-color:transparent; border:none; padding:0;}
.button.barebone:hover          {color:#333; background-color:transparent; border:none; padding:0;}

.button.icon          {}
.button.icon:after    {
  content:"";
  display:inline-block;
  }
/*.icon.pfeil-rechts:after {content:"->"; padding-left:10px;}*/

a[href*="//"]:not([href*=".lokal.tierhilfe-hdh.lok"]):after {
  content:"";
  display:inline-block;
  margin:0 0 0 2px;
  width:16px; height:16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V12L17.206 8.207L11.2071 14.2071L9.79289 12.7929L15.792 6.793L12 3H21Z'%3E%3C/path%3E%3C/svg%3E");
  }
.topbar a:after {display:none !important;}



/*
.overflow-table {overflow:auto;}
.overflow-table table {width:800px;}
*/

/* ************************************************
  Edit wenn eingeloggt
************************************************ */
#editpage       {position:fixed;  bottom:40px; left:0; width:40px; }
#editpage a     {
  display:block; width:40px; height:40px; padding:7px;
  background-color:rgba(250,250,250,0.6); 
  text-decoration:none; text-align:center;
  transition:all 0.3s; 
  box-shadow:3px 3px 5px rgba(0,0,0,0.3); border:1px solid #DDD;
  }
#editpage a svg       {display:block; width:26px; height:26px;}
#editpage a:hover     {box-shadow:3px 3px 8px rgba(0,0,0,0.7);}
.edit {margin-bottom:7px;}

/* Wenn Frontend Edit möglich ist - Nicht so optimal */
/*
.pw-edit {position:relative;}
.pw-edit:before {
  content:"";
  display:inline-block;
  position:absolute;
  top:0; left:0;
  width:5px; height:5px; background:#62BF60;
  }
*/


/* ************************************************
  To Top Button 
************************************************ */
.cd-top {
  display: inline-block; height:45px; width:45px; 
  position: fixed; bottom: 20px; right: 3%;
  overflow:hidden; text-indent:100%; white-space:nowrap;
  background: rgba(185,135,40, 0.75) url('data:image/svg+xml;charset=utf-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16"><polygon fill="%23FFFFFF" points="8,2.8 16,10.7 13.6,13.1 8.1,7.6 2.5,13.2 0,10.7"/></svg>') no-repeat center 50%;
  border:3px double var(--logofarbe) !important;
  color:#FFF; text-decoration:none; 
  opacity: 0;
  -webkit-transition: all 0.3s linear;
     -moz-transition: all 0.3s linear;
          transition: all 0.3s linear;
}

.cd-top svg {width:40px; height:40px; line-height:40px; margin:7px 0 0 8px;}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
     -moz-transition: opacity .3s 0s, visibility 0s 0s;
          transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {visibility:visible; opacity:0.75;}
.cd-top.cd-fade-out   {opacity: .6;}
.cd-top:hover         {background-color: var(--logofarbe); opacity:1;}

@media only screen and (max-width: 900px) {
.cd-top {right:5px;}
}