:root {
  --rot: #c31924;
  --rot-dunkel: #a9141c;
  --weiß: #ffffff;
  --grau: #f5f5f5;
  --schwarz: #222;
  --text: #333;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Arial", sans-serif;
  background-color: var(--grau);
  color: var(--text);
  text-align: center;
  font-size: 16px;
}

/* 📱 TABLET-OPTIMIERUNG: GRÖSSERE SCHRIFTEN */
@media (min-width: 768px) and (max-width: 1200px) {
  body {
    font-size: 20px;
  }
}

/* Header entfernt */
/* header { background-color: var(--rot); color: var(--weiß); padding: 60px 40px 20px; } */
/* header img { height: 480px; margin-bottom: 4px; } */
/* header h1 { font-size: 2.2em; margin: 0; font-weight: bold; letter-spacing: 0.5px; } */

main {
  padding: 50px 20px;
}

.button {
  display: inline-block;
  background-color: var(--rot);
  color: var(--weiß);
  padding: 15px 30px;
  font-size: 1.3em;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: var(--rot-dunkel);
}

@media (min-width: 768px) and (max-width: 1200px) {
  .button {
    padding: 22px 40px;
    font-size: 1.6em;
    border-radius: 12px;
  }
}

footer {
  background-color: #eee;
  color: var(--text);
  padding: 15px;
  font-size: 0.9em;
  border-top: 2px solid var(--rot);
  margin-top: 50px;
}
/* Footer dunkel + Links weiß */
.site-footer {
  background-color: #737373;   /* dunkelgrau */
  color: #fff;
  border-top: 3px solid var(--rot);
}

.site-footer a,
.site-footer a:visited {
  color: #fff;                 /* Link & visited weiß */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255,255,255,.85);
}

.site-footer a:hover,
.site-footer a:focus {
  color: #fff;                 /* beim Hover/Fokus auch weiß */
  text-decoration-color: #fff;
  outline: none;
}