/* styles for website TonArt Rottenburg, ver. 2025. Author: Friedel Jantzen */
:root {
--bgcolor: #fff;
--colsbgcolor: #ffffff;
--menucolor: #990000;
--bottomlength: 980px;  /* 980: length of bottom line (bottom.png) */
--max-containerwidth: var(--bottomlength);
}

html {height:100.3%; font-size:62.5%;}
/* html {scrollbar-color: var(--menucolor) #EEE;} */
body {margin:0; color:black; background-color: var(--bgcolor);
padding:0; padding-bottom: 1em;
font-size:1.3em; line-height:2.0em;
font-style:normal; font-family:'Times New Roman',Georgia,serif;
}

.smallfont {font-size:1.0em; line-height:1.5em;}

/* Pseudo-classes for a. lvhfa */
a:link {color: #006; background-color: var(--bgcolor);}
a:visited {color: #339; background-color: var(--bgcolor);}
a:hover {color: #55c; background-color: var(--bgcolor);}
a:focus {color: #55c; background-color: var(--bgcolor);}
a:active {color: #009; background-color: var(--bgcolor);}

 h1 {font-size:1.4em}
 h2 {font-size:1.15em}
 h3 {font-size:1.1em}
 h4, h5, h6 {font-size:1em}
 h1, h2, h3, h4, h5, h6 {font-family:Arial, Verdana, sans-serif;} /* Verdana has a buggy ldquo */

 h1.topic {padding-top:1em; color:#900; text-align:center; }

 p, li {font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size:1.1em;}

.centered {text-align: center;}
.blockcenter {display: block; margin-left: auto; margin-right: auto;} /* img */
.big {font-size:1.15em; font-family:Arial,sans-serif;}
.fat {font-weight:bold;}
.italic {font-style:italic;}

img.max100 {max-width: 100%; height: auto;}
img.rounded {
 border-radius: 8px;
 box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.5);
}

.styledimg {
 display: block; margin-left: auto; margin-right: auto;
 max-width: 100%;
 border-radius: 8px;
 box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.5);
}

img.linklogo {display: block; margin-left: auto; margin-right: auto; max-width: 100%; height: auto; border-radius: 8px;}
img.linklogo:hover, linklogo:active {border: 1px solid #c33;}

.roundborder {
  border: 1px solid var(--menucolor);
  border-radius: 5px;
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.5);
}

img.mail {padding-right:0.5em;}
img.jahr {display: block; border-style:none; margin:0;} /* width: 100px */

.centerdiv {
 position: relative;
 left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
}

/* single col layout */
.cols-1
{
width: 80%;
margin: 10px auto;
margin-top:3em;
background-color: var(--colsbgcolor);
color: #333;
border: 1px solid var(--menucolor);
border-radius: 5px;
padding: 0.8em;
line-height: 130%;
box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.5);
}
.cols-1 a {background-color: var(--colsbgcolor)}
.cols-1 h1 {font-size: 100%; letter-spacing: 0.3em;}
.cols-1 h1::first-letter {font-size: 150%;} /* .kap */

.content {padding:10px;}


/* 2 cols 50% 50% grid */
.cols-1-2 {
  width: 80%;
  padding: 0;
  margin-left: auto; margin-right: auto;
  margin-top: 1em;
  display: grid;
  /* grid-gap: 8px; */
  grid-column-gap: 1em;
  grid-template-columns: 1fr;
}

@media only screen and (orientation: landscape) {
  .cols-1-2 {grid-template-columns: repeat(2, 1fr);}
}

/* cols-1-2: text areas */
/* margin-bottom 10px : box-shadow 8px */
.col-area {
  background-color:  var(--colsbgcolor);
  color: #000;
  padding: 1em;
  border: 1px solid var(--menucolor);
  border-radius: 5px;
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}
.col-area a {background-color: var(--colsbgcolor)}
.col-area p {font-size: 120%; line-height: 1.2em;}
.col-area h1 {font-size: 100%; letter-spacing: 0.3em;}
.col-area h1::first-letter {font-size: 150%;} /* .kap */

.infobox, .errorbox {margin:2em; padding:0.5em; border:double thick #009; color:#009; background-color:#fdd; text-align:center; font-weight: bold;}
.imgerrorbox {margin:2em; padding:0.5em; border:double thick #009; color:#009; background-color:#fdd;}
.imgerrorbox p { text-align:center; font-weight:bold; margin-left: 48px;} /* w img */
.imgerrorbox img {float: left;}

.itemgrid {display: grid; grid-template-columns: 1fr;}
.gridcenter {-ms-grid-row-align: center; -ms-grid-column-align: center; place-self: center;}
.vertalign {-ms-grid-row-align: center; align-self: center;}
.horzalign {-ms-grid-column-align: center; justify-self: center;}

/* three cols grid layout */

/* header: logo area */
.main-head {
  -ms-grid-column: 1; -ms-grid-column-span: 2; -ms-grid-row: 1; /* for 2 cols! */
  grid-area: header;
  background-color: var(--bgcolor);
  color: #000;
  padding: 0em;
  -ms-grid-column-align: center;
  justify-self: center;
}

/* main-text: center text area */
.main-text {
  -ms-grid-column: 2; -ms-grid-row: 3;
  grid-area: text;
  background-color: var(--bgcolor);
  color: #000;
  padding: 1em; 
}

/* leftcol: Block graphic */
.main-leftcol {
  -ms-grid-column: 1; -ms-grid-row: 3;
  grid-area: leftcol;
/*  justify-self: stretch; */
  background-color: var(--bgcolor);
  color: #000;
  padding: 1em; 
}

/* rightcol: photo */
.main-rightcol {
  -ms-grid-column: 3; -ms-grid-row: 3;
  grid-area: rightcol;
  background-color: var(--bgcolor);
  color: #000;
  padding: 1em; 
}

/* footer: graphic line */
.main-footer {
  -ms-grid-column: 1; -ms-grid-column-span: 2; -ms-grid-row: 4;
  grid-area: footer;
  background-color: var(--bgcolor);
  color: #000;
  padding: 0em;
  -ms-grid-column-align: center;
  justify-self: center;
}


/* text-right: right text area */
.text-right {
  -ms-grid-column: 2; -ms-grid-row: 3;
  grid-area: textright;
  background-color: #fff; /* #ffe */
  color: #000;
  padding: 1em;
  border: 1px solid var(--menucolor);
  border-radius: 5px;
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.5);
}


/* left-100px: left area 100px for graphic bar */
.left-100px {
  grid-area: left100px;
  background-color: var(--bgcolor);
  color: #000;
  padding: 0;
  border: 1px solid var(--menucolor);
  border-radius: 5px;
  box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.5);
}


/* 2 cols wrapper grid 100px auto*/
.wrapper-2-100px {
  width: 75%;
  min-width: 700px;
  max-width: var(--bottomlength);
  margin-left: auto;
  margin-right: auto;
  display: -ms-grid;
  display: grid;
  grid-gap: 12px;
  -ms-grid-colums: 100px auto;
  grid-template-columns: 100px auto;
  grid-template-areas: 
	  "header header"
	  "menu	menu"
	  "left100px textright"
	  "footer  footer"
}


/* 3 cols wrapper grid */
.wrapper-3 {
  width: 75%;
  min-width: 700px;
  max-width: var(--bottomlength);
  margin-left: auto;
  margin-right: auto;
  display: -ms-grid;
  display: grid;
  grid-gap: 0px;
  -ms-grid-columns: 100px auto 300px;
  grid-template-columns: 100px auto 300px;
  grid-template-areas: 
	  "header header  header"
	  "menu	menu   menu"
	  "leftcol text   rightcol"
	  "footer  footer footer"
}


/* multiline content grid layout */

/* 3 cols content wrapper grid */
.content-wrapper {
  width: 100%;
  display: -ms-grid;
  display: grid;
  grid-area: cont;
  grid-gap: 6px;
  -ms-grid-row: 3; -ms-grid-columns: 100px auto 300px;
  grid-template-columns: 100px auto 300px;
}

/* main wrapper grid */
.main-wrapper {
  width: 75%;
  min-width: 700px;
  max-width: var(--bottomlength);
  margin-left: auto;
  margin-right: auto;
  display: -ms-grid;
  display: grid;
  grid-gap: 0px;
  -ms-grid-columns: 100%;
  grid-template-areas: 
	  "header"
	  "menu"
	  "cont"
	  "footer"
}

.leftcell {
/*  justify-self: stretch; */
  background-color: var(--bgcolor);
  color: #000;
  padding: 1em; 
}

.middlecell {
  background-color: var(--bgcolor);
  color: #000;
  padding: 1em; 
}

.rightcell {
  background-color: var(--bgcolor);
  color: #000;
  padding: 1em; 
}