/* RUBEN LEVI - mobile first.
   Der Look bleibt wie anno 1993 (grau, Times, blaue Links).
   Die Grundregeln gelten fuers Handy, die Media Queries erweitern fuer groessere Bildschirme. */

/* ---------- Basis: Handy ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 12px 16px 24px;
  background: #c0c0c0;
  color: #000;
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

a:link { color: #0000ee; }
a:visited { color: #551a8b; }
a:active { color: #ff0000; }

h1 { font-size: 2em; margin: 0.4em 0 0.1em; }
h2 { font-size: 1.4em; margin: 1.2em 0 0.4em; }

hr { margin: 12px 0; }

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

/* Navigation: auf dem Handy etwas mehr Abstand zum Antippen */
.nav { line-height: 2.2; }
.nav a { padding: 6px 2px; }

/* Cover + Steckbrief: auf dem Handy untereinander */
.steckbrief, .steckbrief tbody, .steckbrief tr, .steckbrief td { display: block; }
.steckbrief td { padding: 0 0 12px; }
.steckbrief img { display: block; margin: 0 auto; }

/* Titelliste: volle Breite */
.titel { width: 100%; }
.titel td:first-child, .titel th:first-child { text-align: right; width: 2.5em; }
.titel td:last-child, .titel th:last-child { text-align: right; width: 4em; }

/* Buchungs-Tabelle auf der Kontaktseite */
.buchung { width: 100%; }

ul { padding-left: 1.4em; }
li { margin: 0.3em 0; }

address { font-size: 0.85em; }

blink { animation: blinken 1s steps(1) infinite; }
@keyframes blinken { 50% { visibility: hidden; } }

/* ---------- Ab Tablet ---------- */
@media (min-width: 640px) {
  body {
    max-width: 720px;
    padding: 16px 24px 32px;
    font-size: 17px;
  }

  .nav { line-height: 1.4; }

  /* Cover und Steckbrief nebeneinander, wie eine richtige Tabelle */
  .steckbrief { display: table; }
  .steckbrief tbody { display: table-row-group; }
  .steckbrief tr { display: table-row; }
  .steckbrief td { display: table-cell; padding: 8px; }
  .steckbrief img { margin: 0; }

  .titel, .buchung { width: auto; min-width: 400px; }
}

/* ---------- Ab Desktop ---------- */
@media (min-width: 1024px) {
  body {
    max-width: 800px;
    font-size: 16px;
  }
}