@charset "UTF-8";
@import url(minimal.css);

html {
 background-color: #000;
 background-position: center;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 background-image: url('farbverlauf2.php');
 color: #eee
}

form input, form button, form textarea, form select {
 background: rgba(0, 0, 0, 0.2);
 color:  rgba(255, 255, 255, 0.8)
}

/* Verweise */
a:link{
 color: #faa;
 text-decoration: underline
}
a:visited{
 color: #f6d;
 text-decoration: underline
}
a:hover{
 color:#f0d
}
a:active{
 color:#f0f
}
a:focus{
 color:#aaf;
}

.inline-block, p.nachricht {
 display: inline-block;
 width: auto;
 width: fit-content
}

section {
 border: none;
 background: rgba(0,0,0,0.4);
 background: linear-gradient(60deg, rgba(0,0,100,0.2), rgba(0,100,0,0.2));
}
section blockquote {
 border: none;
 background: rgba(0,0,50,0.4);
 background: linear-gradient(100deg, rgba(50,100,0,0.2), rgba(0,0,100,0.2));
}
section blockquote section {
 border: none;
 background: transparent
}

article {
 border-color: rgba(255,255,255,0.5);
 background: rgba(0,0,50,0.2);
 background: linear-gradient(-30deg, rgba(0,100,0,0.3), rgba(0,0,100,0.3));
}
aside {
 border-color: rgba(255,200,200,0.8);
 background: rgba(50,0,0,0.3);
 background: linear-gradient(120deg, rgba(80,0,0,0.3), rgba(0,0,80,0.3));
}

nav, nav h2 {
 background: rgba(0,50,0,0.2);
 border: none
}
nav form input {
 background: rgba(0,50,0,0.5);
 border: none
}
fieldset {
 border: none;
 background: rgba(0,50,50,0.2);
}

nav#Hauptmenu input {
  transition: background 1s ease-in-out, color 1s ease-in-out;
}
nav#Hauptmenu input:hover {
  background: rgba(0,128,0,0.5);
  color: #fff
}
nav#Hauptmenu input:active {
  background: rgba(128,0,0,0.5);
  color: #fff;
  outline: thin solid yellow
}
nav#Hauptmenu input:focus {
  background: rgba(200,0,100,0.5);
  color: #fff;
  outline: thin solid #0f0
}

html#Schnacker {
 background: transparent
}

html#Gruppe .imFluss .drumrum figure, html#Profil .imFluss .drumrum figure {
 border: none;
 border-radius: 0.5em;
 background: rgba(0,0,0,0.4);
 background: linear-gradient(25deg, rgba(0,100,100,0.3), rgba(100,0,100,0.5));
}

/* Anordnung für breite Anzeige */
@media (min-width: 40em)  {
html {margin-left: 10em}
nav#Hauptmenu {
 width: 9em;
 overflow: auto;
 position: fixed;
 top: 0.1em;
 left: 0.1em;
 bottom: 0.1em;
 margin: 0;
 padding: 0.1em
}
nav#Hauptmenu * {
 text-align: center;
 margin-left: auto;
 margin-right: auto
}
nav#Hauptmenu select {
  height: 8em
}
nav#Hauptmenu option {
  display: block
}
nav#Hauptmenu select + br {
  display: block
}

/* Schnacken */
html#Schnacken body {
margin-top: 0;
}
html#Schnacken h1 {
margin: 0.2rem;
margin-top: 0rem;
}

html#Schnacken figure#f {
 height: calc(100vh - 8.5rem);
}

html#Schnacken form#e {
 margin-bottom: 0;
}

html#Schnacken form#e input[type='text'] {
 display: inline-block;
 width: 80%;
 min-width: 10em
}

html#Schnacken nav#Hauptmenu {margin-top: 0}

figure img {max-width: calc(100vw - 15em)}
}