/* zu verwendende Farben: navy, peacock blue, ivory, candy apple  */


@charset "utf-8";
/* CSS Document fpr freundeskreis alte Form */

body {
  max-width:60em;
  margin: 1em auto;
  background-color: light-yellow;
}

@media (min-width: 30em) {
  #leistungen {
    display: grid;
    grid-template-columns: 1fr 12em;
  }

  #leistungen h2 {
    grid-column: 1 / -1;
  }
}

#angebot {
  background-color: transparent;
  padding: 1em;
  width: 20em;
  text-align: center;
  border: 1em double red;
  border-radius: 1em;
}

#angebot h2 {
  font-size: 2em;
  font-variant: small-caps;
  color: red;
        background-color: transparent;
        border: none;
}

#angebot p {
  color:red ;
}

h1 {

        background-color: #00008B;
         color: beige;
        padding: 0.5em;
        font-family: sans-serif;
        border-radius: 0 1em 0 1em;
        background-image: linear-gradient(50deg, #00008B, red)
}


h2 {
        font-size: 3em;
        color: firebrick;
        background-color: lightsalmon;
        border: thin solid;
        font-family: cursive;
        text-align: center;
}

p {
        color: navy;
        font-size: 1.1em;
}
td  {
        color: navy;
        font-size: 1.1em;

}

header {
        padding: 0 0em;
        margin-bottom: 2em;
}

header p:first-of-type{
  font-size: 2em;
  font-weight: bold;
}
@media (min-width: 30em) {
        header {
                display: grid;
          grid-template-columns: 6em 1fr;
                height: 22em;
}

header p:last-of-type {
    transform: rotate(-0deg);
    border: none;
    padding: 0em;
    border-radius: 0.2em;
    align-self: end;
    width: 14em;
}



header #backlink {
 display:inline-block;
 text-shadow: none;
 color: transparent;
 background: transparent;
 background-size: contain;
 width: 5em;
 height: 3em;
}
li {
 color: navy;
 font-size: 1.1em;

}


a:link {
 color: darkblue;
}
a:visited {
 color: darkblue
 ;
}
a:hover {
 color: #336666;
}
a:active {
 color: #339999;
}

footer {
          display: grid;
          grid-template-columns: 1fr 30em;
}

footer > * {
  grid-column: -2 / -1;
}