/* -------------------------
   GLOBAL TYPOGRAPHY
------------------------- */
body{font-family:sans-serif; padding:20px; background:#f4f4f4; text-align:center;} 

h2{font-weight: 100;}   

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-top: 20px; margin-left: 20px; margin-right: 20px; }
.thumb { width:100%; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,0.2); cursor:pointer; }

@media (max-width: 1500px) { .grid { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

.block { background: #e6e6e6; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); text-align: center; }
.block img { width: 100%; border-radius: 8px; margin-bottom: 15px; }
.block a { margin: 8px 0; font-size: 1.2em; color: #0078d4; text-decoration: none; }
.block span { margin: 8px 0; font-size: 1.4em; color: #000000; text-decoration: none; }  
.btn { padding: 12px 20px; background: #333; color: white; text-decoration: none; border-radius: 5px; display: inline-block; margin-bottom: 20px; font-weight: bold;}
.backbtn { display:inline-block; padding:10px 16px; background:#0078FF; color:white; text-decoration:none; border-radius:6px; margin-bottom:25px; }

button,
.backbtn,
a.backbtn {
  cursor: pointer;
}

/* -------------------------
   FOOTER
------------------------- */
    footer {
        text-align: center;
        padding: 10px 20px 40px 20px;
        font-size: 0.95rem;
        color: #555;
    }

    hr {
        border: none;
        border-top: 1px solid #ccc;
        margin: 20px 40px;
    }


/* -------------------------
   LINK
------------------------- */


footer a {
	color: #1f4f8a;
	text-decoration: none;
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}

footer a:hover {
	color: #4c68ae;
	text-decoration: underline;
}



/* -------------------------
 TABELLE 
 ------------------------- */

  /* Desktop: Tabelle ohne Linien, Text zentriert */
  table.responsive-table {
    width: 95%;
    border-collapse: collapse;
  }

  table.responsive-table td {
    padding: 10px 12px;
    text-align: center;
    border: none; /* keine Linien */
  }

  /* Mobile: untereinander, ebenfalls ohne Linien */
  @media (max-width: 768px) {
    table.responsive-table,
    table.responsive-table tbody,
    table.responsive-table tr,
    table.responsive-table td {
      display: block;
      width: 100%;
    }

    table.responsive-table tr {
      margin-bottom: 16px;
      padding: 10px 0;
    }

    table.responsive-table td {
      padding: 8px 0;
      border: none;
      text-align: center;
    }

    /* Keine Labels */
    table.responsive-table td::before {
      content: "";
      display: none;
    }
  }