html, body  {overflow-x: hidden;} /* HTML + BODY wegen AOS Animationen, sonst entsteht ein horiz. Scrollbalken */
body        {background-color: #FFF;}

.main                      {/*padding-bottom:clamp(20px, 10vw, 40px);*/}
.main  section            {margin-top:0; margin-bottom:0; /*border-bottom: 1px dotted #666;*/}
.main  section            {padding-top:clamp(20px, 10vw, 80px); padding-bottom:clamp(20px, 10vw, 80px);}
.page .main section:first-child  {padding-top:clamp(20px, 10vw, 50px);}/* PAGES erste Section oben weniger */

footer                    {padding:clamp(15px, 4vw, 30px) 0;}
.main                      {min-height:500px;}

/* Stacking */
.mainnav        {z-index:500;}


.bg-0 {background-color:transparent;}
.bg-00 {background-color:#FFF;}
.bg-1 {background-color:#f9f9f9;}
.bg-2 {background-color:#EEE;}
.bg-3 {background-color:#EBF2F3;}


/* +++++++++++++++++++++++++++++++++++
   Mainnav Container
   .mainnav 
       - div.logo
       - nav#site-navigation
            - ul.clicky-menu
+++++++++++++++++++++++++++++++++++ */
.mainnav   {
  padding:0 0 0 0;/* Abstand des ganzen NAV-Balkens hier einstellen */
  background-color:#FFF;

  display:flex;
  align-items:center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  }

.mainnav nav {
  display:flex;
  flex-grow:1;
  flex-basis:auto;
  align-items:center;
  justify-content:flex-end;
  }

/* 
  evtl. setzt JS .fixed wenn gescrollt wird - besser nicht... macht nur Ärger
  .fixed sollte eher der header sein?
*/
/*.mainnav.fixed  {padding:15px 0; background-color:#333; box-shadow: 0 8px 8px rgba(0,0,0,0.25);}*/

/* Logo */
.logo img 			  {display:block; margin:0 auto; max-width:100%; height:auto; transition:all 0.4s;}
.logo:hover img   {transform:scale(1.05);}

/* OPTION: Logo oben mittig setzen */
.logo.mittig-oben         {border-bottom:1px solid #CCC;}
.logo.mittig-oben .inner  {padding:20px 0;}

/* Balken auf anderen Pages/Templates außer HOME */
.little-hero {  
  background-color:var(--logofarbe);
  padding:4rem 0;
  }


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   CONTENT
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* content + sidebar */
.contentwrap {grid-template-columns:1fr 400px;}

@media only screen and (max-width: 1050px) {
.contentwrap {grid-template-columns:1fr;}
}




/* *******************************************
   Fließtext
 ******************************************* */
h1, h2, h3, h4, h5, .page-title {font-family:var(--font-header);}

h1, h2, h3,         {margin:5px 0 3px 0; padding-top:15px; clear:both;}
.contentwrap p, 
.contentwrap ul, .contentwrap ol  {margin:5px 0 3px 0; padding-top:1px;}
.contentwrap table p {margin:0; padding:0;}

h2 {font-weight:700; font-size:26px; }
h3 {font-weight:700; font-size:22px;}
.contentwrap p, .contentwrap ul, .contentwrap ol  {}

.contentwrap ul {list-style:square;  margin-left:20px;}
.contentwrap ol {list-style:decimal; margin-left:20px;}

.contentwrap a:not(.button)         {color:var(--link-color-on-white);}
.contentwrap a:hover:not(.button)   {color:#333; text-decoration:underline;}

.contentwrap strong {font-weight:700;}
.contentwrap em     {font-style:italic;}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   Tabellen
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
table                    {margin:7px 0 18px 0; padding-top:1px;}
table                    {border-collapse:collapse;}
td                       {padding:5px 8px; border:1px solid #CCC; vertical-align:top;}
thead th                 {background:#f5f5f5; padding:5px; text-align:left;}
th                       {padding:5px; text-align:left; border-right:1px solid #CCC; border-bottom:2px solid #CCC; vertical-align:middle;}
th:last-child  {border-right:none;}
table caption                         {background-color:#444; color:#FFF; padding:5px;}

table.zebra td                        {border:none;}
table.zebra tr:nth-child(even) td      {background-color:#f2f2f2;}
table.zebra tr:last-child td          {border-bottom:1px solid #f3f3f3;}
table.zebra td.teile-nr,
table.zebra td.teile-text {border-right:1px solid #DDD;}

table.zebra tr:nth-child(even) td      {border-color:#FFF;}

table.dunkel caption                  {background-color:#222; color:#FFF;}
table.dunkel td                       {color:#FFF;}
table.dunkel td, table.dunkel th      {background-color:#444; color:#FFF; border-left:1px solid #777;}
table.dunkel tr:nth-child(odd) td     {background-color:#888;}

table.stil-2                          {border-top:3px solid #666; border-bottom:3px solid #666;}
.contentwrap table.stil-2 td,.contentwrap table.stil-2 th        {padding:5px; border:1px solid #DDD;}

.teile-nr, .teile-ort {text-wrap:nowrap;}
/* Der Teil des Treffer highlighted */
.teile-nr b {color:#2253D2;}

@media screen and (max-width:700px){
  table td, table th {font-size:14px; padding:5px 3px;}
}

@media screen and (max-width:360px){
  table td.teile-text {font-size:12px;}
}


/* *********************************
  Überschriften HOME 
********************************* */
/* Section-Überschrift HOME - Border drunter */
.title { margin-bottom:2rem; }/* DIV mit h2.section-title und evtl. supline oder subline als DIV */

div.supline {
  font-family: var(--font-header);
  font-size:clamp(22px, 3vw, 28px);
  text-transform:uppercase;
  font-weight:600;
  color:#333;
  margin-bottom:5px;
  background-image:url(/site/templates/images/kindswater-logo.svg);
  background-repeat:no-repeat;
  background-position:left center;
  padding-left:clamp(3.5rem, 5vw, 5rem);
  }

@media only screen and (max-width: 900px){
  /* Logobar ist absolute top..., somit gibt es etwas Platz oben in main */
  main {/*padding-top: 7rem;*/}
  /* Mobile Nav */
  .nav .inner         {width:100%;}
  #intro              {margin-top:0;}
 }



@media only screen and (max-width: 600px) {
  .copy .text-right   {text-align:left;}
  .inner        {width:96%;}
  .contentwrap table {width:100%;}
}


@media only screen and (max-width: 560px) {

}


/* Login */
.login div {margin-bottom:10px; flex-wrap:nowrap;}
.login label {font-size:15px;}
.login input {width:50%;}
.login input[type=submit] {width:85%; margin-top:10px;}

@media only screen and (min-width: 700px) {
  .login {max-width:350px;}
  .login input[type=submit] {width:auto; }
}



input[type=text], input[type=password], input[type=number], select#bereiche {border:1px solid #666; padding:7px; margin-right:3px;}
input[type=submit]  {padding:7px;}
input[type=number]  {}

/* Suchfeld mit Reset-X */
.suchfeld-group       {position:relative; display:flex;}
/* Input Number */
#suche                {display:inline-block; padding-right:2rem; width:70%;}
/* X */
.suchfeld-group span  {display:inline-block; position: absolute; width:27px; left:calc(70% - 30px); top:3px; font-size:2rem; text-align:center; /*background:#CCC;*/}
/* Sumbit Button */
#los {width:calc(30% - 6px);}

@media only screen and (min-width: 700px) {
  #suche {width:200px;}
  .suchfeld-group span {left:174px;}
  #los {width:auto;}
}


/* Logout button */
a.logout {position:absolute; top:0; right:0;}

@media only screen and (max-width: 800px) {
  #editpage {display:none;}
}

/* etwas mehr Platz beim Editieren */
.pw-edit-copy {padding:3px 6px;}

input[type=number]  {font-size:1.6rem;}/* Damit das iPhone nicht zoomt... */

input[name=gang]    {width:80px; padding-top:8px; padding-bottom:8px;}
.gang-nr, .gang-ort {font-weight:bold;}
.gang-bestand       {border-width:1px; border-color:#000;}
.gang-text          {border-right-color:#000; }

.gang-bestand       {width:10%;}
.gang-notiz {width:20%;}


#gang th {border:1px solid #CCC; background:#f5f5f5;}


select, input, .button {height:40px;}

select, input {font-size:1.6rem; font-family:var(--font-text);}

.button.mach-mir-pdf {}