* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: #f7f8fa;
  color: #222;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white;
  border-bottom: 4px solid #ff1739;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #222;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  flex-shrink: 0;
}

.brand img {
  width: 48px;
  height: 48px;
}

.nav {
  display: flex;
  gap: 4px;
}

.nav a {
  padding: 9px 14px;
  color: #444;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  transition: 0.25s ease;
}

.nav a:hover {
  background: #fff1f3;
  color: #ff1739;
}

.nav a.active {
  background: #ff1739;
  color: white;
}

/* Content */

main {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 16px 40px 16px;
}

.page-title {
  margin-bottom: 20px;
}

.page-title h1 {
  margin: 0;
  font-size: 32px;
}

.page-title p {
  margin: 6px 0 0 0;
  color: #666;
  font-size: 16px;
}

.card {
  background: white;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
  margin-bottom: 24px;
}

.card h2 {
  margin: 0;
  padding: 16px 20px;
  font-size: 18px;
  border-bottom: 1px solid #eee;
}

.card-body {
  padding: 16px;
}

/* Shown behind the iframe until its content has loaded */
.frame {
  background: #f7f8fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='16' fill='none' stroke='%23ff1739' stroke-width='4' stroke-dasharray='70 30'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 20 20' to='360 20 20' dur='0.9s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") center 60px no-repeat;
  border-radius: 8px;
}

.frame.loaded {
  background: none;
}

.frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* Start page */

.text-card {
  padding: 24px;
}

.text-card h2 {
  padding: 0;
  border: 0;
  margin-bottom: 12px;
}

.text-card p {
  margin: 0 0 12px 0;
  color: #555;
  font-size: 16px;
  line-height: 1.6;
}

.text-card p:last-child {
  margin-bottom: 0;
}

.text-card a {
  color: #ff1739;
}

.section {
  margin-bottom: 32px;
}

.section h2 {
  margin: 0;
  font-size: 22px;
}

.section > p {
  margin: 4px 0 14px 0;
  color: #666;
  font-size: 16px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.tiles.three {
  grid-template-columns: repeat(3, 1fr);
}

.tile {
  display: block;
  padding: 18px 20px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  color: #222;
  text-decoration: none;
  transition: 0.25s ease;
}

.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}

.tile strong {
  display: block;
  font-size: 17px;
  margin-bottom: 4px;
}

.tile strong::after {
  content: " \2192";
  color: #ff1739;
}

.tile.solid strong::after {
  color: white;
}

.tile span {
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.tile.solid {
  background: #ff1739;
  color: white;
}

.tile.solid span {
  color: #ffe3e7;
}

.tile.solid:hover {
  background: #99102a;
}

@media (max-width: 760px) {
  .tiles,
  .tiles.three {
    grid-template-columns: 1fr 1fr;
  }

  .tiles.three .tile:last-child {
    grid-column: span 2;
  }

  .tile {
    padding: 14px;
  }

  .tile strong {
    font-size: 16px;
    white-space: nowrap;
  }

  .text-card {
    padding: 18px;
  }
}

/* Nächste Spiele: the embedded page has a transparent background and
   can't be styled from here, so the frame supplies its red. Heights
   follow the embedded layout, which wraps the team names at 768px,
   500px and 400px iframe width (iframe width = viewport - 32px). */

.match-frame {
  background: #ed1c24;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  overflow: hidden;
}

.match-frame iframe {
  display: block;
  width: 100%;
  height: 110px;
  border: 0;
}

@media (max-width: 799px) {
  .match-frame iframe {
    height: 170px;
  }
}

@media (max-width: 531px) {
  .match-frame iframe {
    height: 190px;
  }
}

@media (max-width: 431px) {
  .match-frame iframe {
    height: 225px;
  }
}

@media (max-width: 343px) {
  .match-frame iframe {
    height: 275px;
  }
}

.more-link {
  display: inline-block;
  margin-top: 16px;
  color: #ff1739;
  text-decoration: none;
  font-weight: 500;
}

.more-link:hover {
  text-decoration: underline;
}

/* Footer */

.footer {
  background: #222;
  color: #bbb;
  font-size: 14px;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 16px;
}

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

.footer a:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .topbar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-bottom: 8px;
  }

  .brand {
    font-size: 18px;
  }

  .brand img {
    width: 40px;
    height: 40px;
  }

  .nav {
    overflow-x: auto;
  }

  .nav a {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    font-size: 14px;
  }

  main {
    padding-top: 20px;
  }

  .page-title h1 {
    font-size: 26px;
  }

  .card-body {
    padding: 8px;
  }
}

@media (max-width: 360px) {
  .nav a {
    padding: 8px 4px;
    font-size: 13px;
  }
}