:root {
  
/*Farben */
--f_hintergrund: #fff;
--f_schrift: #000;
--f_kopfschrift: #000;

--f_kopf_hg: #fff;

--f_navelementerahmen: #888;

--f_hg_seitenrahmen: #fff;
--f_seitenrahmen: #ccc;

--f_verweis: #a00;
--f_hauptmenuverweis: #fff;

--f_eingaberanddunkel: #a00;
--f_eingaberandhell: #f00;
--f_knopf: #a00;

--f_hg_suchleiste: #eee;
--f_hg_linien: #eee;

--f_hg_pdflinks: #ddd;
--f_rahmen_pdflinks: #a00;

--f_inhalthintergrund: #fff;
--f_artikel_endlinie: #aaa;

--f_hg_hauptmenue: #a00;
--f_hg_menue_aktuell: #e00;
--f_hg_menue_waehlbar: #a00;
--f_rand_menue_waehlbar: #ccc;

--f_hg_menu_pulldown: #1d3585;
--f_hg_menu_pulldown_over: #5567a4;
--f_menu_pulldown_link: #a00;

--f_unternavizeile_hg: #ccc;
--f_unternavilinie: #ccc;

--f_hg_sitemap: #fff;
--f_sitemap_rahmen: #888;

/*ENDE Farben*/

/*Schriftgroesse*/
--10px: 0.625rem;
--12px: 0.75rem;
--13px: 0.813rem;
--14px: 0.875rem;
--16px: 1rem;
--18px: 1.125rem;
--24px: 1.5rem;
--32px: 2rem; 
/*ENDE Schriftgroesse*/
}


/*Grundeinstellungen*/
@font-face
{
  font-family: FontAwesome;
  font-weight: bold;
  src: url('../fonts/fontawesome/webfonts/fa-solid-900.ttf') format('truetype');
}


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





body  
{
 font-family:Tahoma,Verdana, Arial,Helvetica,sans-serif;
 font-size: 100%;
 color:var(--f_schrift); 
 line-height:130%;
 margin: 0;
}

  a:link {color:var(--f_verweis); text-decoration: none;}
  a:visited {color:var(--f_verweis); text-decoration: none;}
  a:hover {color:var(--f_verweis); text-decoration: underline;}
  a:active {color:var(--f_verweis); text-decoration: underline;}


h1 {font-size:150%; line-height:125%;}
h2 {font-size:130%; font-weight:bold;}


header
{
 width: clamp(50%, 600px, 95%);
 margin: 2% auto;
}

header img 
{width: 100%;}



footer
{
 width: 100%; 
 height: fit-content;
 margin: 3rem 0;
 text-align: center;
}

.footer__anschrift
{ background-color: #ddd;  padding: 0.5rem;}

.rechtliches
{margin-top: 1rem;}
/*ENDE Grundeinstellungen*/


/*Hauptmenue*/
nav
{
 position: relative; 
 display: flex;  
 width: 100%;
 background-color: var(--f_hg_hauptmenue);
 padding: 10px;
}

.sticky
{
  margin: 0 auto;
}

.sticky + .content {
  padding-top: 0px;
}

.hauptzeile
{
 position:absolute; 
 list-style-type: none; 
 display: none;
 flex-direction: column;
  align-items: flex-start;
width: 100%;
background: var(--f_hg_hauptmenue);
padding: 2%;
z-index: 40;
}

.haupteintrag
{
 padding: .3em;
 width: 90%;
 text-align: left;
 border-bottom: 1px solid #fff;
 color: var(--f_vg_hauptmenue);
}

.haupteintrag + .haupteintrag
{ border-top: 1px solid var(--f_vg_hauptmenue);}


  .haupteintrag a, .ebene2eintrag a {color: var(--f_hauptmenuverweis); text-decoration: none;}


.ebene2
 {
  /*position:relative;*/
  display: none;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  list-style-type: none;
  background-color:  var(--h_menu_bg);
  border-top:0;
  flex-direction: column;
/*  flex-wrap: wrap;
  justify-content: flex-start;*/
  align-items: baseline;
  transition: max-height 250ms ease-out,
              opacity 50ms ease-in;
 }

.ebene2eintrag
{
  width: 100%;
  padding: 0.2em 5px;
  text-align: left;
}

.ebene2eintrag + .ebene2eintrag
{
  border-top: 1px solid #fff;
  margin-top:0;

}

.hmenupfeil, .umenupfeil
{
  color: var(--f_hauptmenuverweis);
  float:right;
  padding:2px 0.5vw;
  cursor: pointer;
}


.nav-toggle
{display: none;}


.nav-toggle-label 
{
  font-family: FontAwesome;
  font-size: 1.8rem;
  margin-left: 10px;
  cursor: pointer;
 }

.nav-toggle-label::before
{
  font-weight: bold;
  content: "\f0c9";
  color: var(--f_hauptmenuverweis);
}

.such-toggle-label::before
{
  font-weight: bold;
  content: "\f002";
  color: var(--f_hauptmenuverweis);
}

.nav-toggle:checked ~ .nav-toggle-label::before
{content: "\f068";}

.nav-toggle:checked ~ .hauptzeile
{ display: flex;} 



.such-toggle, .such-toggle-label 
 {display: none;}
 
.such-toggle-label 
{
  font-family: FontAwesome;
  font-size: 1rem;
  margin-left: 10px;
  cursor: pointer;
 }
 


#volltextsuche
{
 width:100%; 
 padding: 0 10px;
}

.suchzelle
{
  border-top: 1px solid var(--rahmenfarbe);
 /*float: right;*/
}
/*ENDE Hauptmenue*/


/*Startseite*/
main
{
  width: min(60rem, 95%);
  margin: 0 auto;
}

.zentriert
{text-align: center;}

.startcontainer
{
 display: grid;
 width: 100%;
 grid-template-columns: 1fr;
 gap: 1rem;
}

section.startseite
{background-color: rgba(0, 0, 0, 0.05); padding: 1rem;}
/*{box-shadow: 5px 5px 10px  rgba(0, 0, 0, 0.3); padding: 1rem;}*/


.wir-sind
  {grid-column: 1/2; grid-row: 1/2;}
 .buerozeiten
  {grid-column: 1/2; grid-row: 2/3;}
 .link-bilder
  {grid-column: 1/2; 
  grid-row: 3/4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  }
 .personen-bild
  {grid-column: 1/2; grid-row: 4/5;}
  
  
.klickfeld
{
  display: flex;
  align-items: center;
  gap: 1rem;
}

.klickfeld__bild {width: 8rem;}
.klickfeld__text {flex-basis: 100%;}


.klickfeld__bild img {width: 100%;}

/*ENDE Startseite*/


/*Angebote-Seite*/
.angebot_container
{display: grid;
 grid-template-columns: 1fr;
 gap: 1rem;}
 
.angebot
{display: grid;
 grid-template-rows: subgrid;
  grid-row: span 3;
 background-color:  #eee;
 border: 2px solid #888;
 padding-bottom: 1rem;
}

.angebot__illu
{display: flex;
 flex-direction: column;
  
}

.angebot__illu_bild
{background-color: #fff; width: 100%; height: auto;  border-bottom: 1px solid #888;}

.angebot__illu_text
{
  /*font-size: max(var(--16px), 4vw);*/
  margin-bottom: 0;
  font-size: var(--16px)
 line-height: 120%;
font-weight: bold;
text-align: center;}

.angebot__inhalt
{
  /*font-size: clamp(var(--16px), 4.5vw, var(--24px));*/
  font-size: var(--16px);
  padding: 0 1rem;
  text-align: center;
}

.angebot__inhalt ul
{margin-top: 0; text-align: left;}

/*ENDE Angebote-Seite*/




/* Textseite */
.seitenrahmen
{
display: flex;
  flex-direction: column;
  width: min(95%, 1100px);
  margin: 2% auto;
  gap: 2rem;
  justify-content: space-around;
}

/* Seknavi */
.untermenuerahmen
{
 display: none;
 position:relative;
 top: -20px;
 left:  -10px;
 width:100%;
 font-size: 90%;
 background-color: #fff;
}

.seknavi
{
 position:absolute;
 width:100%;
 padding: 2%;
 background-color: #eee;
 z-index: 25;
} 

.themenueberschrift
{
 margin-bottom:20px;
 margin-left:10px;
 font-weight: bold;
}


  a.unavi_ueber:link {color:#000; text-decoration: none;}
  a.unavi_ueber:visited {color:#000; text-decoration: none;}
  a.unavi_ueber:hover {color:#000; text-decoration: underline;}
  a.unavi_ueber:active {color:#000; text-decoration: underline;}

.seknavi ul, .seknavi ul ul
{
 list-style:none;
 padding: 0;
 margin: 0;
}

.seknavi li .u_waehlbar,.seknavi ul li .aktuell, .wieder_waehlbar  
{
 text-align:left;
 width:100%;
 padding: 3px 0px 3px 10px;
 display:table;
 font-weight:normal;
 border-top: 1px solid #ccc;
}

.wieder_waehlbar
{
 background: #ccc;
 border-top: 1px solid #888;
}

.seknavi ul li .aktuell 
{
 color:#000;
 background:#ccc;
 border-top: 1px solid #ccc;
}

.seknavi ul ul
{
  width:100%;
  padding-left: 40px;
}

.seknav-toggle
{display: none;}


.seknav-toggle-label 
{
  display: block;
  font-family: FontAwesome;
  font-size: 1.8rem;
  margin: 10px 0 0 20px;
  cursor: pointer;
 }

.seknav-toggle-label::before
{
  font-weight: bold;
  content: "\f0c9";
  color: var(--f_verweis);
}

.seknav-toggle:checked ~ .seknav-toggle-label::before
{content: "\f068";}

.seknav-toggle:checked ~ .untermenuerahmen
{ display: flex;} 

/* ENDE Seknavi */  


.inhalt
{display: flex;
  flex-direction: column;
  width: 100%;
}

.inhaltstext
{display: block;}

.illufoto
{width: 100%;}

.illufoto img
{width: 100%;}


pre
{
 font-family: Tahoma,Verdana, Arial,Helvetica,sans-serif;
white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
}
/* ENDE Textseite */


/*responsive*/

@media only screen and (min-width: 25em)
{

/* Angebote-Seite */
.angebot_container
{grid-template-columns: 1fr 1fr;}
.
/* ENDE Angebote-Seite */

}

@media only screen and (min-width: 43.75em)
{
  
nav {padding: 0; position: unset;}
  
.nav-toggle-label {display: none;}  
  
.hauptzeile  
 {
  position: unset; 
  display:flex;
  flex-direction: row; 
  justify-content: center;
  gap: clamp(0.313rem, 1vw, 2rem);
  margin:0;
  padding:0;
 } 
 
.haupteintrag
{
 position: relative;
 font-size: clamp(var(--13px), 1.5vw, var(--18px));
 width: unset;
 text-align: center;
 border: none;
} 

.haupteintrag:hover
{
 background-color: var(--f_hg_menue_aktuell);
}

.ebene2
{
 display: none;
 flex-direction: column; 
 width: max-content;
 max-height: fit-content;
 position: absolute;
 left:-10px;
 top: var(--32px);
 padding:0;
 z-index: 50;
 box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.ebene2eintrag
{
 background-color: var(--f_hg_menu_pulldown);
 padding: 5px var(--16px);
}
 
.haupteintrag:hover > .ebene2
{
 display: flex;
}
  
 
.ebene2eintrag:hover
{
 background-color: var(--f_hg_menu_pulldown_over);
}
 

#volltextsuche 
 {
  display: none; 
  position: absolute;
  top: 0;
  border: 0;
  right: 20%;
  width: 32ch;
 }
 
 #suchleiste 
 {
  position: absolute;
/*  right:  25px;*/
  top: 0;
/*  width: 100%;*/
  padding: 3px;
  z-index: 55;
 }
  
 #suchbegriff
 {
  width: 20ch;
  font-size: calc(86% + 0.1vw); 
 }
 
 .such-toggle
 {display: none;}
 
 .such-toggle-label
 {
  display: block;
  cursor: pointer;
  float: right;
  margin-right:30px;
 }


.such-toggle:checked ~ .such-toggle-label:before
 {
 content: url("../grafik/menu_schliessen.png");
 cursor: pointer;
 } 

.such-toggle:checked ~ #volltextsuche
 {
 display: block;
 }   
  
.such-toggle:checked ~ .such-toggle-label::before
{content: "\f068";} 


/*Startseite*/
.startcontainer
{ grid-template-columns: 1fr 22rem; }


.wir-sind
  {grid-column: 1/2; grid-row: 1/2;}
 .buerozeiten
  {grid-column: 1/2; grid-row: 2/3;}
 .link-bilder
  {grid-column: 2/3; grid-row: 1/2;}
 .personen-bild
  {grid-column: 2/3; grid-row: 2/3;}
  

/*ENDE Startseite*/

/* Textseite */
.seitenrahmen
{flex-direction: row;
font-size: clamp(var(--14px), 1.5vw, var(--18px));
line-height: 140%; 
}

/* Seknavi */
.untermenuerahmen
{
 display: block;
 position:relative;
 margin-top:5%;
 margin-bottom: 5%;
 width:30%;
 left:0;

}

.seknav-toggle-label {display: none;}

.seknavi
{
 position:unset;
 background-color: unset;
 float:left;
 margin-top:30px;
} 

.seknavi ul ul
{
  text-align:right;
}
/* ENDE Seknavi */  


.illufoto
{margin: 1%; float: right; }

.illuquer
{width: 27vw;}

/* ENDE Textseite */

 
} 


@media only screen and (min-width: 50em)
{
 
 /* Angebote-Seite */ 
  .angebot_container
{grid-template-columns: 1fr 1fr 1fr 1fr;}
/* ENDE Angebote-Seite */
  
}
/*ENDE responsive*/