/* Konzertberichte - Uebersichtsseite (concerts.html) */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 8px;
}

body {
  margin: 0;
  padding: 8px;
  background: #000;
  color: #fff;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  line-height: 1.5;
}

a:link    { color: #ffff00; }
a:visited { color: #ffcc00; }
a:hover, a:focus { color: #fff; }
a:active  { color: #ffff00; }
a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.wrap {
  max-width: 800px;
  margin: 0 auto;
}

/* Kopfzeile */
.site-header {
  background: #008080;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 24px;
  padding: 10px 14px;
  font-size: 140%;
  line-height: 1.3;
}
.site-header h1 { margin: 0; font-size: inherit; font-weight: normal; }
.site-header p  { margin: 0; }

.intro { margin: 16px 0; }

/* Jahres-Navigation */
.year-nav { margin: 0 0 8px; }
.year-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 90%;
}
.year-nav a {
  display: block;
  padding: 6px 10px;
  border: 1px solid #008080;
  border-radius: 4px;
  text-decoration: none;
}
.year-nav a:hover, .year-nav a:focus { background: #008080; }

/* Abschnitte */
section { margin: 8px 0 0; }
section h2 {
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #008080;
  font-size: 130%;
  font-weight: bold;
}

ul.konzerte {
  margin: 0;
  padding-left: 1.3em;
}
ul.konzerte li {
  margin: 0;
  overflow-wrap: break-word;
}

s { color: #bbb; }
.hinweis { color: #ff5555; }
.hinweis s { color: #ff9999; }

.top { margin: 6px 0 0; text-align: right; font-size: 85%; }
.top a { display: inline-block; padding: 6px 0 6px 10px; }

/* Fusszeile */
.site-footer { margin-top: 36px; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background: #008080;
  font-size: 85%;
}
.footer-nav a {
  display: block;
  padding: 10px 12px;
  color: #fff;
}
.footer-nav a:visited { color: #fff; }
.copyright {
  margin: 10px 0 0;
  font-size: 80%;
  color: #aaa;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Smartphones */
@media (max-width: 600px) {
  body { padding: 4px; }
  .site-header { font-size: 120%; flex-direction: column; text-align: center; }
  .year-nav ul { gap: 8px; }
  .year-nav a { padding: 10px 14px; }
  section h2 { font-size: 120%; }
  ul.konzerte { padding-left: 1.1em; }
  }