/* Basis */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: clamp(16px, 4vw, 50px);
  background: #FFFFF0;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  max-width: 78ch;
  margin-left: auto;
  margin-right: auto;
}

/* Links */

a {
  color: #00B0FF;
  text-decoration: underline;
}

a:visited {
  color: #00B0FF;
}

a:active {
  color: #B0B0FF;
}

a:hover {
  text-decoration: none;
}

/* Überschriften */

h1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: clamp(1.7rem, 4vw, 2.2rem);
  line-height: 1.2;
}

h1 img {
  vertical-align: -0.1em;
  margin-right: 0.4rem;
}

h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-size: clamp(1.2rem, 2vw, 1.35rem);
  line-height: 1.2;
}

h3 {
  margin-top: 1.2rem;
  margin-bottom: 0.7rem;
  font-size: 1.15rem;
  line-height: 1.2;
}

p {
  margin-top: 0;
  margin-bottom: 0.7rem;
}

small {
  font-size: 0.85em;
}

.ri{
  text-align:right;
}

.navlinks{
  margin-top:3rem;
}

/* Farben */

.green {
  color: #339933;
}

.orange {
  color: #FF6600;
}

.after-float{
  clear: left;
}

/* Bilder */

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* alte Float-Klassen, falls auf anderen Seiten gebraucht */

img.bili {
  float: left;
  margin-right: 0.6rem;
  margin-bottom: 0.4rem;
}

img.biri {
  float: right;
  margin-left: 0.6rem;
  margin-bottom: 0.4rem;
}

/* Tabellen, vor allem Startseite */

table {
  width: 100%;
  border-collapse: collapse;
}

td{
  vertical-align: top;
  padding-right: 1rem;
}

table td:last-child{
  padding-right: 0;
}

.contact-table td{
  vertical-align: middle;
  padding-right: 1.2rem;
}

.contact-table td:last-child{
  padding-right: 0;
}

.mapframe{
  width: 540px;          /* statt nur max-width */
  max-width: 100%;
  height:70vh;
  min-height:480px;
  border:0;
}

.contact-logo{
  margin-top:0;
}

.schedule{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1rem 0;
}

.schedule td{
  padding:0.06rem 0;
  vertical-align:top;
}

.schedule tr + tr td{
  padding-top:0.18rem;
}

.schedule .time{
  width:6.8em;
  white-space:nowrap;
  padding-right:0.8rem;
}

/* Indexseite: Logo links fest, Text rechts */

@media (min-width: 701px){

  table.index{
    width:100%;
    table-layout:auto;
  }

  table.index td{
    vertical-align:middle;
  }

  table.index td:first-child{
    width:259px;
    min-width:259px;
    padding-right:1.5rem;
  }

  table.index td:first-child img{
    width:259px;
    max-width:none;
    height:auto;
  }

  table.index td:last-child{
    width:auto;
	min-width: 34em;
  }
}

/* Mobile */

@media (max-width:700px){
  table.index,
  table.index tr,
  table.index td{
    display:block;
    width:100%;
  }

  table.index td:first-child{
    text-align:center;
    margin-bottom:1rem;
  }

  table.index td:first-child img{
    max-width:259px;
    width:70%;
    height:auto;
  }
}

@media (max-width: 600px) {
  body {
    padding: 14px;
  }

  img.bili,
  img.biri {
    float: none;
    display: block;
    margin: 0.6rem auto;
  }

  table,
  tr,
  td {
    display: block;
    width: 100%;
  }

  td {
    padding-right: 0;
    margin-bottom: 1.2rem;
  }

  table.schedule{
    display:table;
    width:100%;
  }

  table.schedule tr{
    display:table-row;
  }

  table.schedule td{
    display:table-cell;
    width:auto;
    margin-bottom:0;
  }

  table.schedule .time{
    width:5.8em;
    white-space:nowrap;
    padding-right:0.5rem;
  }

  .contact-table td{
    display:block;
    width:100%;
    padding-right:0;
    margin-bottom:1.2rem;
  }

  .mapframe{
    width:100%;
    height:60vh;
    min-height:450px;
  }
}