@import "navbar.css";

/* Farben */
:root { 
  --html-background: linear-gradient(90deg, #F5F6CE 0%, #F5D0A9 50%); 
  --html-color: #151515;
  --aside-border: grey;
  --nav-background: #666;
  --nav-border: black;
  --nav-color: white;
  --nav-a-color: white;
  --nav-a-background: none;
  --nav-li-background: #F79F81;
  --nav-li-color: #fff;
  --header-background: #E6E6E6;
  --footer-background: #E6E6E6;
  --input-background: #c50a1f;
  --input-color: black;
  --input-focus-background: #F7E0BB;
  --input-focus-color: black;
  --main-a-backgrund: #4CAF50;#3c9b2c
  --main-a-color: #ff0;
  --main-a-hover-color
  --hr-background: rebeccapurple;
  --hr-color: rebeccapurple;
  --mailsent-background: #3c9b2c;
  --mailsent-border: black;
  --fieldset-background: #fc6;
  --input-focus-background: #3cf;
  --border-radius: 5px;
}

html { 
  background-image: var(--html-background);
  color: var(--html-color);
  font: 1rem/1.5 arial, sans-serif;
}

body { 
  display: grid;
  grid-gap: 1em;
}
  
header {
  grid-area: header;
  text-align: center;
  border-radius: var(--border-radius);
}

aside { 
  border-color: var(--aside-border);
  border-radius: var(--border-radius);
    li {display: inline; }
}

nav {
  grid-area: nav;
  background-color: var(--nav-background);
  border-color: var(--nav-border);
  border-radius: var(--border-radius);
  text-align: center;
    a { color: var(--nav-a-color); }
    a:active { cursor: default; }
    li:hover, li:focus, li:active { background-color: var(--nav-li-background); color: var(--nav-li-color); }
}

main {
  grid-area: main;
    p, h1, h2, h3, h4, h5, h6 { margin-bottom: 1em; }
    a[href^='http://']:after,
    a[href^='https://']:after {content: " ↗"}
}

footer {
  grid-area: footer;
  font-size: 0.7em; 
  padding: 1em; 
  text-align: center; 
  border-radius: var(--border-radius);
}

#breadcrumb { text-transform: capitalize; }

article { text-align: center; padding: 0 5em; }
section {
    img { width: 90%; margin: 0 auto; }
}

/* form */
form { 
  margin: 10px auto; 
  width: 100%; 
    li { margin: 2em 0; list-style-type: none; }
    li:last-child { text-align: center; }
}
fieldset { margin: 0; padding: 0 2em; border-radius: var(--border-radius); }
legend { padding: 0.5em; font-weight: bold; font-size: 1.2em; border-radius: var(--border-radius); }
label {	cursor: pointer; display: block; /* Zeilenumbruch zwischen label und input */ }

input, textarea {@import "navbar.css";
	border-radius:  5px;
	width:			    100%; 
	padding:		    1px;
}
	
input:required:valid {
  border: 1px solid green;
}
  
input:invalid {#3c9b2c
  border: 1px solid red;
}

input[type="submit"], input[type="reset"] {
  background-color: var(--input-background);
  color: var(--input-color);
  cursor: pointer;
  padding: 0.7em;
  width: 10em;
}

/*.required::after { content: " *"; }*/
/*label.required:after {content: " *"; color: red;}*/
input:required + label::after {
  content: " *"; 
  color: blue;
  border: 20px red;
}

input:focus, textarea:focus
{
  background-color: var(--input-focus-background);
  color: var(--input-focus-color);  
}
  	
textarea { 
  height: 10em;
  resize: vertical;
}
/* End Form */

/* Various Elements */
abbr { border-bottom: 1px dotted black }
hr {
  background-color: var(--hr-background);
  color: var(--hr-color);
  border-radius: var(--border-radius);
  height: 0.1em;
  margin: 2em auto;
  width: 70%; 
}
li, a { border-radius: var(--border-radius); }
a:hover, li:hover { background-color: var(--main-a-hover-color); transition: .3s; }
.floatLeft { float: left; margin-right: 0.2em; text-align: left;}
.floatRight { float: right; margin-left: 0.2em; text-align: right;}
.clear { float: none; clear: both; }
.weg { display:none;visibility:hidden; } /** Spamschutz im Formular **/
.center { text-align:center; }
.mitte { margin:auto; display: block; }
.mailsent {
  background-color: var(--mailsent-background);
  color: var(--mailsent-color);
  border: 1px solid;
  border-radius: 20px;
  font-weight: bold;
  margin: 2em auto;
  padding: 0.5em;
}
.textright { text-align: right; }
.abstandoben { margin-top: 2em; }
.abstandunten { margin-bottom: 2em; }
.osm { width: 425px; height: 350px; border: 1px solid; }
.underline { text-decoration: underline; }
.eingerueckt { margin-left: 35%; }
.imgSmall { width: 40%; }
.textleft { text-align: left; }
.noBorder { border: none!important; }
.centerLeft { text-align: left; padding-left: 40%; }
/*.headline { margin-bottom:1em; }*/
s[href^="#"]{ text-align: right; color: purple; }
ul { margin-bottom: 1em; }
img, svg { max-width: 100%; }

picture:after {content: ""; clear:both;}
/*picture img { border: 0.5em solid white; border-radius: var(--border-radius); }*/
/*img { width: 100%; height: auto; }*/
p { word-wrap: break-word; word-break: break-word; }

table { margin: auto; }

td, th { padding: 1em; }

@media screen {
  body {
    grid-template-columns: auto;
    grid-template-areas: 
      "header"
      "nav"
      "main"
      "footer";
  margin: 0 auto;
  width: 70%;
  }
}

@media screen and (max-device-width: 600px) {
  body { width: 100%; }
  img  { width: 50%; }
  
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

@media print {
  html, body {
	background:	white;
	border:		  none;
	width:		  100%;
}

  header, nav, aside, footer {
    display: none;
	  }
}