/* Inhalt von public/css/style.css */
body { font-family: sans-serif; line-height: 1.6; margin: 0; padding: 0; }
.container { width: 80%; margin: auto; overflow: hidden; padding: 20px; }
header { background: #333; color: #fff; padding-top: 10px; min-height: 70px; border-bottom: #0779e4 3px solid; }
header a { color: #fff; text-decoration: none; text-transform: uppercase; font-size: 16px; }
header ul { padding: 0; list-style: none; }
header li { display: inline; padding: 0 20px 0 20px; }
.main-content { padding: 20px 0; }
footer { background: #333; color: #fff; text-align: center; padding: 20px 0; margin-top: 20px; }
ul.download-list { list-style-type: disc; margin-left: 20px; }
ul.download-list li a { color: #0779e4; text-decoration: underline; text-transform: none; font-size: 16px; }

/* Inhaltsverzeichnis (Table of Contents - TOC) */
.toc-container {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 5px;
}
.toc-container h3 {
    margin-top: 0;
    color: #333;
}
.toc-container ul {
    list-style-type: none;
    padding: 0;
}
.toc-container ul li a {
    color: #0779e4;
    text-decoration: none;
    padding: 5px 0;
    display: block;
}

/* FAQ Kacheln (Accordion) */
.faq-question {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-size: 1.1em;
    border-radius: 5px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question:hover, .active {
    background-color: #ddd;
}

.faq-answer {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
}

/* Pfeil-Icon für Expand/Collapse */
.faq-question::after {
    content: '\002B'; /* Plus-Symbol */
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active::after {
    content: "\2212"; /* Minus-Symbol, wenn aktiv */
}

/* Styles für das Logo */
.site-logo {
    height: 40px; /* Passen Sie die Höhe nach Bedarf an */
    vertical-align: middle;
    margin-right: 15px;
}

/* H1 anpassen, damit sie neben dem Logo bleibt */
header .container h1 {
    display: inline;
    vertical-align: middle;
}

/* Styles für die Roadmap-Zeitleiste */
.roadmap-timeline {
    position: relative;
    padding: 20px 0;
    list-style: none;
}

/* Die vertikale Linie der Zeitleiste */
.roadmap-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px; /* Position der Linie */
    width: 3px;
    background: #0779e4; /* Hauptfarbe */
}

.timeline-item {
    position: relative;
    padding-left: 60px; /* Platz für Punkt und Linie */
    margin-bottom: 40px;
}

/* Der Punkt auf der Zeitleiste */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    width: 25px;
    height: 25px;
    background: #fff;
    border: 3px solid #0779e4;
    border-radius: 50%;
    z-index: 1;
}

.timeline-content {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.timeline-date {
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
}

.timeline-status-planned { color: orange; }
.timeline-status-released { color: green; }
.timeline-status-beta { color: blue; }

/* Styles für Community Cards */
.community-card {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
}
.community-card h3 {
    margin-top: 0;
    color: #0779e4;
}