body {
  width: 100%;
  background-color: white;
  margin: 0px;
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

header {
  width: 100%;
}

header h1 {
  color: #f19936;
  padding: 20px;
  background-image: url("../img/titel.jpeg"); 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin: 0px;
}

nav li {
  display: inline;
  margin-right: 0.5rem;
}

nav {
  background-color: #f19936;
  color: white;
  padding: 10px;
  margin: 0;
}

section {
  margin: 0;  
}

h2 {
  margin: 0;
}

h3 {
  margin-top: 15px;
  margin-bottom: 4px;
}

p {
  margin-bottom: 4px;
}

nav ul {
  padding: 0;
  margin: 0;
}

nav a {
  color: white;
  text-decoration: none;
}

.hell a {
  color: #f19936;
  text-decoration: underline;
}

.dunkel a {
  color: white;
  text-decoration: underline;
}

a[href^="http"]::after { content: " \2197";
}

footer {
  background-color: gray;
  color: white;
  text-align: center;
  padding: 0.5rem;
}

footer a {
  color: white;
  text-decoration: none;
}

footer li {
  display: inline;
  margin-right: 0.5rem;
}

footer ul {
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

figure {
  text-align: center;
  margin-left: 0;
  margin-right: 0;
}

.hell {
  background-color: white;
  padding:  1rem;
  margin: 0px;
  color: #f19936;
}

.dunkel {
  background-color: #f19936;
  color: white;
  padding:  1rem;
  margin: 0rem;
}

.notfall {
  background-color: indianred;
  padding: 0rem;
  margin-bottom: 0rem;
}

img {
  border: none;
}

.gray {
  filter: grayscale(100%);
}

#open {
  padding: 10px;
  background-color: color(srgb 0.945 0.6 0.212 / 0.654);
  color: white;
  margin: 15px;
  border-radius: 7px;
  border: 2px solid #f19936;
  display:inline-block;
  
}

#open {
    position: relative; /** ADD THIS TO i TAG. This do magic! It's necessary **/
}

#open span {
    visibility: hidden;
    opacity:  0;
    position: absolute; /** It's necessary to do magic **/
    //bottom: -64px; /** Show Tooltip 32px bottom "i" tag. Depends on "i" tag height =) **/
    text-align: center; /** If You want tooltip text centered **/
    padding: 5px; /** Tooltip padding **/
    width: 100%; /** Tooltip width. You can set 100% to cover all "i" tag **/
    height: auto; /** Auto is good choice **/
    background: white; /** Tooltip background **/
    color: #f19936; /** Tooltip text color **/
    border-radius: 7px;
    border: 2px solid #f19936;
}

#open:hover span {
    visibility: visible;
    opacity: 1;
    transition: all 2s ease;
}

.person {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #f19936;
  width: 200px;
  display:inline-block;
  vertical-align: top;
  min-height: 340px;
}

.person img {
  height: 280px;
  width: 200px;
  border-radius: 6px;
  object-fit: cover;
  object-position: center;
}

.oz {
  margin: 0px;
  margin-top: 10px;
}

.ozday {
  margin: 5px;
  display:inline-block;
  vertical-align: top;
  border: 1px solid white;
  width: 150px;
}

.ozcell {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}

/*
To do: Personen gleich gross, iPhone-Anpassungen (Öffnungszeiten, Menüs).
*/