body
{
    background-color: black;
    color: #ffffff;
    margin: 0; /* full-bleed background and navbar */
}

.main-box
{
    color: gray;
}

.nav-text
{
    color: white;
}

h1
{
    color: white;
    text-align: center;
    font-size: 50px;
    margin-top: 20px;
}

h2
{
    color: white;
    text-align: center;
    font-size: 20px;
    margin-top: 20px;
}

h3
{
    color: white;
    text-align: left;
    font-size: 18px;
}

/* Layout helpers */
.container {
    width: min(1100px, 92%);
    margin-inline: auto;
}

.section-log{
        width: min(1100px, 92%);
        margin-inline: auto;
        padding: 64px 0;
}

main {
    display: block;
}

/* indexTop section */
.indexTop {
    background: radial-gradient(60% 60% at 50% 40%, rgba(90,90,90,0.25) 0%, rgba(0,0,0,0) 60%),
                linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 60%);
    padding: 80px 0 50px;
}

.indexTop .hero-actions {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Make indexTop CTAs slightly larger than navbar buttons */
.indexTop .btn-even { height: 60px; padding: 0 16px; font-size: 16px; }

/* Navbar refinements */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
}

.button-home
{
    background-color: gray;
    border-radius: 50%;
    color: black;
    padding: 20px 90px;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 20px 20px;
    cursor: pointer;
    position: absolute;
    top: 200px;
    left: 50px;
}

/* Button row and buttons inspired by .button-home */
.button-row {
    display: flex;
    justify-content: center;       /* center items; space managed by gap */
    align-items: center;           /* vertically center buttons */
    flex-wrap: wrap;               /* allow wrapping on narrower screens */
    gap: 10px;                     /* consistent spacing between buttons */
    width: 100%;
    background-color: rgb(103, 91, 91);   /* navbar background */
    padding: 12px 16px;            /* some breathing room */
    box-sizing: border-box;
}

/* Base button style usable in navbar and hero */
.btn-even {
    background-color: #231f1f;     /* dark gray buttons */
    color: #ffffff;                /* white text */
    text-decoration: none;
    display: inline-flex;          /* center text vertically & horizontally */
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    border: none;                  /* for <button> elements */
    margin: 0;                     /* spacing handled by parent */
    height: 48px;                  /* slightly shorter to fit more */
    padding: 0 14px;               /* auto-size to label */
    border-radius: 10px;           /* rectangular with rounded edges */
    white-space: nowrap;
}

.btn-even:hover { filter: brightness(1.1); }

/* Keyboard focus visibility */
.btn-even:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* Active/current page state */
.navbar .btn-even.active,
.navbar .btn-even[aria-current="page"] {
    background-color: #3a3333;
    box-shadow: inset 0 0 0 2px #5a5a5a;
}

/* Alternate button style for secondary actions */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    padding: 0 16px;
    border-radius: 10px;
    border: 2px solid #5a5a5a;
    color: #ffffff;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-outline.small { height: 44px; padding: 0 14px; font-size: 14px; }
.btn-outline:hover { border-color: #bbbbbb; color: #ffffff; }
.btn-outline:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }

/* Sections */
.section { 
    padding: 64px 0;}
.section-alt { background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.0) 100%); }
.section-title {
    color: #f0f0f0;
    text-align: center;
    font-size: 28px;
    margin: 0 0 24px 0;
}
.lead { color: #cfcfcf; text-align: center; max-width: 800px; margin: 0 auto; line-height: 1.7; }

/* Cards grid */
.card-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.card-media {
    height: 220px; /* increased to allow a larger logo */
    background: #1d1d1d;
}

/* Center a logo inside the card media area */
.card-media {
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-media img.card-logo {
    /* Use height to fill the media area while preserving aspect ratio */
    width: auto;
    height: 85%;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.gradient-media {
    background: linear-gradient(135deg, #3a3a3a 0%, #1b1b1b 100%);
}

.card-body { padding: 16px; }
.card-title { color: #ffffff; margin: 0 0 8px 0; font-size: 18px; }
.card-text { color: #c8c8c8; margin: 0 0 12px 0; line-height: 1.6; }

/* Team grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Separate grid for 5th member - centered */
.team-grid-single {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

/* Group photo below team cards */
.team-group-photo {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.team-group-photo img {
    /* prefer min(), but include a robust fallback for servers/browsers where it fails */
    max-width: 900px; /* absolute cap */
    width: 100%;      /* fill container but not exceed max-width */
    height: auto;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
    display: block;
}

.team-grid-single .team-card {
    width: calc((100% - 60px) / 4); /* Same width as cards in 4-column grid */
    max-width: 250px;
}

.team-card {
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #2d2d2d;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-bottom: 8px;
}

/* When using photos inside .avatar, ensure they cover the circle */
.avatar[style] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent; /* hide initials when image present */
}

/* Per-member avatar tweaks */
.avatar--geschwandtner {
    /* move the photo a bit up so the face is more centered in the circle */
    background-position: center 30%;
}

.team-card h4 { margin: 8px 0 4px 0; color: #fff; }
.team-card p { margin: 0; color: #c8c8c8; }

/* Contact */
.contact-box {
    background: #121212;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 20px;
    color: #d8d8d8;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}
.contact-box a { color: #ffffff; text-decoration: underline; }

/* Footer */
.site-footer {
    border-top: 1px solid #2a2a2a;
    padding: 20px 0;
    background: #0d0d0d;
}
.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.site-footer p { color: #bdbdbd; margin: 0; }
.footer-links a { color: #d0d0d0; margin-left: 12px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

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

/* Modifier for centering a single card in the games grid */
.card-grid--single {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center; /* center the card inside the grid */
    max-width: 700px;
    margin: 0 auto;
    gap: 20px;
}

@media (max-width: 560px) {
    .button-row { flex-wrap: wrap; gap: 8px; }
    .button-row .btn-even { width: calc(50% - 8px); height: 48px; }
    .btn-outline { height: 48px; }
    .indexTop .btn-even { height: 48px; }
    .card-grid { grid-template-columns: 1fr; }
    .team-grid { grid-template-columns: 1fr; }
}

/* Responsive adjustments for the larger logo */
@media (max-width: 900px) {
    .card-media { height: 180px; }
    .card-media img.card-logo { height: 75%; max-width: 100%; }
}
@media (max-width: 560px) {
    .card-media { height: 140px; }
    .card-media img.card-logo { height: 60%; max-width: 100%; }
}

/* Container class for lists we want colored bullets on */
.colored-list {
  padding-left: 1.25rem; /* keep space for markers */
  margin: 0;
}

/* Modern - easiest, supported in current browsers */
.colored-list li::marker {
  font-size: 1.1em;
}

/* Per-item classes (preferred for explicit control) */
.colored-list li.red::marker    { color: #e74c3c; } /* red */
.colored-list li.orange::marker { color: #f39c12; } /* orange */
.colored-list li.green::marker  { color: #2ecc71; } /* green */

/* Fallback for older browsers that don't support ::marker */
.colored-list.fallback { list-style: none; padding-left: 0; }
.colored-list.fallback li { position: relative; padding-left: 1.25rem; }

/* draw the bullet with ::before and color per class */
.colored-list.fallback li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.1em;
  line-height: 1;
}
.colored-list.fallback li.red::before    { color: #e74c3c; }
.colored-list.fallback li.orange::before { color: #f39c12; }
.colored-list.fallback li.green::before  { color: #2ecc71; }

.legend_red {
    color: #e74c3c;
}
.legend_orange {
    color: #f39c12;
}
.legend_green {
    color: #2ecc71;
}

p
{
    text-align: center;
}

.button-timeline
{
    background-color: #231f1f;     /* dark gray buttons */
    color: #ffffff;                /* white text */
    text-decoration: none;
    display: flex;         
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    border: none;                  /* for <button> elements */
    margin: 0;                     /* spacing handled by parent */
    height: 48px;                  /* slightly shorter to fit more */
    padding: 0 14px;               /* auto-size to label */
    border-radius: 10px;           /* rectangular with rounded edges */
    white-space: nowrap;
}

.button-timeline:active {
    background-color: #3a3333;
    box-shadow: inset 0 0 0 2px #5a5a5a;
}

.timeline-content
{
text-align: left;
background-color: rgb(34, 31, 31);
}

details[open] .button-timeline
{
    background-color: gray;
    color: black;
}

details{
    margin-bottom: 20px;
}

.image-frame,
.picture-frame
{
    border: 2px solid gray;
    border-radius: 10px;
    padding: 5px;
    background-color: black;
    display: block;        /* avoid inline gaps and make full-width blocks */
    max-width: 100%;       /* never overflow the container */
    box-sizing: border-box;
    margin: 0 auto 16px;   /* centered with a bit of spacing below */
}

/* Ensure images scale down to fit their frame while keeping aspect ratio */
.image-frame img,
.picture-frame img {
    display: block;
    width: 100%;
    height: auto;          /* preserve aspect ratio */
    object-fit: contain;   /* keep entire image visible inside the frame */
}