body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    font-family: 'Nunito', Arial, sans-serif;
}

header {
    background-color: #1a2c36;
    color: white;
    text-align: center;
    padding: 10px 0; /* Höhe reduzieren */
    font-size: 16px;
}

header h1 {
    font-size: 24px;
    margin: 0;
}

header p {
    font-size: 14px;
    margin: 5px 0;
}

nav {
    background: #284453;
    padding: 8px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 14px;
}

nav ul li a:hover {
    background-color: #284453;
}

/* Stellt sicher, dass das Dropdown sich relativ zum übergeordneten <li> positioniert */
.dropdown {
    position: relative;
}

/* Dropdown-Styling */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%; /* Direkt unter "Tutorials" */
    left: 0;
    background-color: #333;
    min-width: 200px;
    z-index: 1000;
    list-style: none;
    padding: 0;
    border-radius: 5px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    text-align: left;
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu li a {
    padding: 10px 15px;
    display: block;
    color: white;
}

.dropdown-menu li a:hover {
    background-color: #f7931a; /* Bitcoin-Orange */
}

/* Dropdown-Menü anzeigen, wenn Hover über "Tutorials" */
.dropdown:hover .dropdown-menu {
    display: block;
}

nav ul li a.active {
    color: #f7931a !important; /* Bitcoin-Orange */
}

section {
    padding: 20px;
    text-align: center;
}

article {
    background: white;
    margin: 10px auto;
    padding: 15px;
    border-radius: 5px;
    max-width: 600px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

footer {
    background-color: #1a2c36;
    color: white;
    text-align: center;
    padding-top: 20px;
    font-size: 14px;
    position: relative; /* oder ganz weglassen */
}

footer nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

footer nav ul li {
    display: inline;
    margin: 0 15px;
}

footer nav ul li a {
    color: #f7931a;
    text-decoration: none;
    font-weight: bold;
}

footer nav ul li a:hover {
    text-decoration: underline;
}

#info-ticker {
    background-color: #1a2c36;
    color: white;
    text-align: center;
    padding: 8px;
    font-size: 14px;
}

#info-ticker div {
    display: flex;
    justify-content: center;
    gap: 20px;
}

#info-ticker strong {
    color: #f7931a;
}

#ticker-container, #info-ticker {
    margin: 0;
    padding: 0;
    height: auto; /* Falls er vorher eine fixe Höhe hatte */
    min-height: unset; /* Entfernt eventuell gesetzte Mindesthöhen */
}

#ticker-container:empty, #info-ticker:empty {
    display: none;
}

/* 🌙 Dark-Mode für den Blog */
.blog-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #f7931a;
    margin-bottom: 1.5rem;
    
}

.blog-container {
    display: flex;
    gap: 0rem; /* Weniger Abstand zwischen den Cards */
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 6vw; /* Reduziere linken und rechten Abstand */
}

.blog-card {
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    width: 350px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    margin: 10px 10px;
}

.blog-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

.blog-card-heading {
    color: #292626;
}

.blog-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

.blog-info {
    padding: 1rem;
    color: #e0e0e0;
}

.blog-date {
    font-size: 0.9rem;
    color: #6a6a6a;
    display: block;
    margin-bottom: 0.5rem;
}

.blog-info h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #161616;
}

.blog-info p {
    font-size: 1rem;
    color: #474747;
}

.blog-read-more {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 1rem;
    color: #f7931a;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.blog-read-more:hover {
    color: #ffae42;
}

.blog-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card a {
    display: block;
    text-decoration: none;
    color: inherit; /* Verhindert, dass der Text blau wird */
}

/* 🟠 Blog Hero Image */
.blog-hero {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.blog-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(70%);
}

.blog-hero-text {
    position: absolute;
    bottom: 30px;
    left: 50px;
    color: #fff;
}

.blog-meta {
    font-size: 14px;
    opacity: 0.8;
}

/* 🟠 Call-to-Action Buttons */
.blog-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px 0;
}

.cta-button {
    background-color: #f7931a;
    border: none;
    color: white;
    padding: 10px 15px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
}

.cta-button:hover {
    background-color: #ff9f29;
}

/* 🟠 Blog Layout */
.blog-content {
    display: flex;
    width: 80%;
    margin: auto;
    gap: 30px;
}

.blog-article {
    width: 70%;
}

.blog-sidebar {
    width: 30%;
    background: #222;
    color: white;
    padding: 20px;
    border-radius: 5px;
}

.blog-sidebar ul {
    list-style: none;
    padding: 0;
}

.blog-sidebar ul li {
    padding: 5px 0;
}

.blog-sidebar ul li a {
    color: #f7931a;
    text-decoration: none;
}

.blog-sidebar ul li a:hover {
    text-decoration: underline;
}

/* 🟠 Hervorgehobenes Zitat */
.highlight-quote {
    background: #333;
    color: #fff;
    padding: 15px;
    border-left: 4px solid #f7931a;
    font-style: italic;
    margin: 20px 0;
}

/* 🟠 Autor-Box */
.author-box {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    padding: 15px;
    border-radius: 5px;
    margin-top: 40px;
}

.author-box img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 15px;
}

/* 🟠 Kommentare */
.comments {
    margin-top: 50px;
    padding: 20px;
    background: #f8f8f8;
    border-radius: 5px;
}

.comment {
    background: white;
    padding: 10px;
    margin-top: 10px;
    border-left: 3px solid #f7931a;
}

.post-thumbnail {
    max-width: 80%;  /* Das Bild wird maximal 80% der Artikelbreite */
    height: auto;  /* Beibehaltung des Seitenverhältnisses */
    display: block;  /* Damit `margin: auto;` funktioniert */
    margin: 20px auto;  /* Zentrierung mit Abstand */
    border-radius: 8px;  /* Abgerundete Ecken für schöneres Design */
}

/* ✅ Artikel-Container breiter machen */
.article-container {
    max-width: 1200px;  /* Erhöhte maximale Breite */
    width: 100%;  /* Anpassbar für kleinere Screens */
    margin: 40px auto;  /* Zentriert den Artikel */
}

/* ✅ Artikel-Box (weißer Hintergrund mit Padding & Schatten) */
.article-box {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    max-width: 15000px;
    width: 100%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.article-box p {
    line-height: 1.8; /* oder 1.7, je nach Geschmack */
    max-width: 770px; /* Optimal sind meist 60-75 Zeichen pro Zeile */
    color: #333; /* Oder ein dunkles Grau wie #444 */
    font-size: 16px; /* oder 17px, falls dir 16px noch zu klein ist */
    margin-bottom: 1.2em;
    text-align: justify !important;
    hyphens: auto;
    word-spacing: -0.3px; /* Kannst du zusätzlich kombinieren */
    
}

.article-box a {
    color: #f7931a;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 2px 4px;
    border-radius: 4px;
}

.article-box a:hover {
    background-color: rgba(247, 147, 26, 0.1); /* Leichtes Orange als Hover-Hintergrund */
    color: #d17600;
    text-decoration: none;
}

/* ✅ Artikel-Bild */
.article-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
    border-radius: 8px;
}

.article-thumbnail {
    max-width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: 10px;
}

.article-image {
    max-width: 80%;
    height: auto;
    border-radius: 10px;
}

/* ✅ Zurück-Link */
.back-link {
    margin-top: 0px;
}

.back-link a {
    text-decoration: none;
    color: #f7931a;
    font-weight: bold;
}

.image-container {
    text-align: center;
    margin: 10px 0;
}

.image-caption {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin-top: 5px;
    font-style: italic;
}

/* Inhaltsverzeichnis Styling */
.toc-container {
    position: absolute;
    top: 0;
    left: 20px; /* Bleibt immer links */
    width: 240px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding: 15px;
    font-size: 14px;
    line-height: 1.5;
    transition: top 0.2s ease-out;
}

/* Fixierte Position beim Scrollen */
.fixed-toc {
    position: absolute !important;
    left: 20px !important;
    transition: top 0.2s ease-out;
}

/* Inhaltsverzeichnis stoppt beim Footer */
.bottom-toc {
    position: absolute !important;
    left: 20px !important;
}

/* Hierarchische Struktur */
.toc-container ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.toc-container li {
    margin-left: 15px;
    font-size: 13px;
}

.toc-container a {
    text-decoration: none;
    color: #f7931a;
    display: block;
    padding: 3px 0;
}

.toc-container a:hover {
    color: #d17a0d; /* Dunkleres Orange beim Hover */
    text-decoration: underline;
}

/* Verschachtelung für H2 und H3 */
.toc-container ul ul {
    padding-left: 15px;
    font-size: 12px;
}

/* Active ScrollSpy */
.toc-container li.active a {
    font-weight: bold;
    color: #d17600;
}

/* Stoppt das ToC, bevor es in den Footer geht */
.toc-stop {
    position: absolute;
    bottom: 0;
    left: 20px;
}

/* Artikel-Container anpassen */
.article-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    max-width: 1200px;
    margin: 40px auto;
    /*padding-left: 280px; /* Platz für das Inhaltsverzeichnis */
    position: relative; /* Stellt sicher, dass .toc-container sich daran ausrichtet */
}

.blog-tags {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.blog-tags .tag {
    background-color: #f7931a;
    color: white;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 15px;
    font-weight: bold;
}

/* Farbe für markierten Text (statt Blau -> leichtes Orange) */
::selection {
    background: #f7b456; /* Helles Orange */
    color: #222; /* Dunkler Text für Kontrast */
}

/* Für Firefox */
::-moz-selection {
    background: #f7b456; /* Helles Orange */
    color: #222;
}

.resource-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    max-width: 1000px;
    margin: auto;
    align-items: stretch;
}

.resource-category {
    flex: 1 1 calc(50% - 20px);
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    min-width: 300px;
}

.resource-category h3 {
    margin-top: 0;
}

.resource-category ul {
    list-style-type: none;
    padding: 0;
}

.resource-category li {
    margin: 5px 0;
}

.resource-category a {
    text-decoration: none;
    color: #007bff;
}

.resource-category a:hover {
    text-decoration: underline;
}

/* Einzelne Ressourcenelemente */
.resource-item {
    margin-bottom: 15px;
}

.resource-item a {
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    color: #007bff;
}

.resource-item a:hover {
    text-decoration: underline;
}

.resource-item p {
    margin: 5px 0 0;
    color: #555;
    font-size: 0.9em;
}

/* Mobilansicht: Einspaltiges Layout */
@media (max-width: 768px) {
    .resource-category {
        flex: 1 1 100%;
    }
}

#ticker-container {
    margin: 0;
    padding: 0;
    height: auto; /* Falls er vorher eine fixe Höhe hatte */
    min-height: unset; /* Entfernt eventuell gesetzte Mindesthöhen */
}

#ticker-container:empty {
    display: none;
}

#ticker-link {
    text-decoration: none; /* Kein Unterstrich */
    color: inherit; /* Gleiche Farbe wie der umgebende Text */
}

#ticker-link:hover {
    text-decoration: none;
    color: inherit;
}

.donation-container {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 30px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.donation-method {
    text-align: center;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
    flex-direction: column; /* Stellt sicher, dass Inhalte gestreckt werden */
    justify-content: space-between; /* Verteilt den Inhalt gleichmäßig */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.donation-method h2 {
    color: #f7931a;
}

.donation-qr {
    width: 180px;
    height: 180px;
    margin: 0 auto; /* Zentriert horizontal */
    display: block;
    border-radius: 5px;    
}

.donation-address {
    font-size: 14px;
    word-break: break-all;
    color: #333;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    font-family: monospace;
}

.welcome {
    /*display: none;  Falls komplett entfernen */
    /* Alternativ: Hintergrundfarbe ändern, wenn behalten */
    text-align: center;
    padding: 20px;
    border-radius: 10px;
}

/* 🎯 Neuste Artikel Sektion */
.latest-articles {
    margin: 40px auto;
    max-width: 900px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.article-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.article-item {
    flex: 1 1 calc(50% - 10px);
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    min-width: 280px;
}

.article-item h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.article-item p {
    font-size: 14px;
    color: #666;
}

/* 💰 Bitcoin Live-Daten Styling */
.btc-info {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.btc-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btc-stats p {
    font-size: 16px;
    background: #1c1c1c;
    color: white;
    padding: 10px;
    border-radius: 5px;
}

/* ✅ Responsive Fix für kleinere Bildschirme */
@media (max-width: 768px) {
    .article-item {
        flex: 1 1 100%;
    }

    .btc-stats {
        flex-direction: column;
        gap: 10px;
    }
}

.index-resource-container {
    display: flex;
    justify-content: center;
    gap: 20px; /* Abstand zwischen den Boxen */
    max-width: 85%; /* Die Breite auf 85% des Containers begrenzen */
    margin: 0 auto; /* Zentrieren */
    flex-wrap: wrap;
    align-items: stretch; /* Stellt sicher, dass alle Elemente gleich hoch sind */
}

.index-resource-item {
    flex: 1 1 calc(30% - 20px); /* Breite der einzelnen Boxen begrenzen */
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    min-width: 250px; /* Mindestbreite für kleinere Bildschirme */
    max-width: 420px; /* Maximale Breite pro Box */
    justify-content: space-between; /* Verteilt die Inhalte gleichmäßig */
}

.index-resource-item p {
    text-align: center;
}

.cta-button {
    display: block;
    text-align: center;
    background: #f7931a;
    color: white;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    width: fit-content;
    margin: 20px auto;
}

.cta-button:hover {
    background: #ff9f29;
}

.quote-of-the-day {
    text-align: center;
    font-size: 18px;
    font-style: italic;
    color: #222;
    padding: 20px;
    border-radius: 10px;
}

.latest-articles {
    margin: 40px auto;
    max-width: 900px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.article-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.article-item {
    flex: 1 1 calc(33% - 20px);
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    min-width: 280px;
}

.article-item img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.article-item h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.article-item p {
    font-size: 14px;
    color: #666;
}


/* Container für den Inhalt */
.content {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

/* Vergleichstabelle */
.comparison-table {
    width: 90%; /* Statt 100%, damit es nicht komplett den Bildschirm füllt */
    max-width: 1100px; /* Maximale Breite, damit es nicht zu breit wird */
    margin: 20px auto; /* Zentriert die Tabelle */
    border-collapse: collapse;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.comparison-table th, .comparison-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.comparison-table th {
    background-color: #284453;
    color: white;
}

.comparison-table td {
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Farbcodes */
.green {
    background-color: #d4edda;
    color: #155724;
    font-weight: bold;
}

.yellow {
    background-color: #fff3cd;
    color: #856404;
    font-weight: bold;
}

.red {
    background-color: #f8d7da;
    color: #721c24;
    font-weight: bold;
}

/* Container für den Inhalt */
.content {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

/* Überschriften */
h1 {
    font-size: 2em;
    margin-bottom: 10px;
    text-align: center;
}

.comparison-table {
    width: 100%; /* Stelle sicher, dass die Tabelle immer die volle Breite einnimmt */
    max-width: 1100px;
    margin: 20px auto;
    border-collapse: collapse;
    table-layout: fixed; /* Verhindert ein späteres Resizing */
}

.comparison-table th, .comparison-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.comparison-table th {
    background-color: #284453;
    color: white;
}

.comparison-table td {
    font-size: 1em;
}

/* Farbcodes */
.green {
    background-color: #d4edda;
    color: #155724;
    font-weight: bold;
}

.yellow {
    background-color: #fff3cd;
    color: #856404;
    font-weight: bold;
}

.red {
    background-color: #f8d7da;
    color: #721c24;
    font-weight: bold;
}

section h2 {
    text-align: left;
}

.article-box {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.table-container {
    overflow-x: auto;
    margin: 20px 0;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th, .comparison-table td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
    word-wrap: break-word;
}

.green { background-color: #c3e6cb; }
.yellow { background-color: #ffeeba; }
.red { background-color: #f5c6cb; }

.article-footer {
    text-align: center;
    margin-top: 20px;
}

.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background: #ff9900;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.cta-button-big {
    display: block; /* Block-Level für volle Breite */
    width: fit-content; /* Passt die Breite an den Inhalt an */
    margin: 20px auto; /* Automatische horizontale Zentrierung */
    padding: 10px 20px;
    background: #ff9900;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center; /* Text innerhalb des Buttons zentrieren */
}
.section-article p {
    text-align: left;
}
section h2 {
    text-align: left;
}

.comparison-table {
    width: 100%; /* Stelle sicher, dass die Tabelle immer die volle Breite einnimmt */
    max-width: 1100px;
    margin: 20px auto;
    border-collapse: collapse;
    table-layout: fixed; /* Verhindert ein späteres Resizing */
}

#text-center {
    text-align: center !important;
}

#daily-quote p, cite {
    text-align: center !important;
}

.section-article h3 {
    text-align: left;
}

.section-article h2 {
    text-align: left;
    color: #f7931a;
}

.section-article li {
    text-align: left;
}

.recommendations {
    list-style: none;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.recommendations a {
    text-decoration: none;
    color: #f7931a;
    font-weight: bold;
}

header h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Abstand zwischen Logo und Text */
    font-size: 24px;
    margin: 0;
}

header h1 img {
    height: 35px; /* Logo-Größe anpassen */
    width: auto;
    vertical-align: middle;
}

#home-link {
    text-decoration: none;
    color: white;
}

.warum-blockdenker .text-container {
    max-width: 1200px; /* gleiche Breite wie deine Cards */
    margin: 0 auto;
    padding: 0 15px; /* kleiner Innenabstand für mobile */
    text-align: center !important;
}

@media (max-width: 768px) {
    .article-container {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* Falls du zusätzlich verhindern willst, dass der Text am Rand klebt */
    .article-container p,
    .article-container h1,
    .article-container h2,
    .article-container h3,
    .article-container ul,
    .article-container ol,
    .article-container img {
        margin-left: 16px;
        margin-right: 16px;
    }

    /* Falls Bilder trotzdem volle Breite sollen */
    .article-container img.full-width {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100%;
    }
}

header {
    background-color: #1a2c36;
    color: white;
    text-align: center;
    padding: 10px 0 0 0; /* Oben 10px, rechts 0, unten 0, links 0 */
    font-size: 16px;
    position: relative; /* WICHTIG */
}

.menu-toggle {
    display: none;
    font-size: 2rem;
    cursor: pointer;
    color: white;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    z-index: 2000;
}

@media (max-width: 768px) {

    header {
        padding: 10px 0 10px 0; /* Oben und unten 10px, rechts und links 0 */
    }

    header .logo-container {
        display: flex;
        align-items: center;
        text-align: left;
        justify-content: flex-start; /* Wichtig */
    }

    header h1 span {
        text-align: left;
    }

    header #home-link {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    header #home-link p {
        text-align: left;
        margin-left: 12px;
    }

    header h1 img {
        height: 35px;
        width: auto;
        margin-right: 0px;
    }

    header #home-link span {
        text-align: left;
    }
    .menu-toggle {
        display: block;
    }

    #nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #284453;
        width: 100%;
        z-index: 1000;
        transition: top 0.3s ease;
    }

    #nav.open {
        display: flex;
        flex-direction: column;
    }

    #nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    #nav li {
        width: 100%;
        text-align: center;
    }

    #nav a {
        display: block;
        padding: 15px 0;
        color: white;
        text-decoration: none;
        font-size: 16px;
        border-bottom: 1px solid #284453;
    }

    #nav a:hover {
        background-color: #284453;
    }

    #nav li:last-child a {
        border-bottom: none;
    }
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #1a2c36; /* Hintergrundfarbe anpassen */
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 9999;
}

body.loaded #preloader {
    display: none;
}

.book-table thead {
    display: none;
}




.article-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    position: relative;
}

.toc-container {
    position: sticky;
    top: 20px; /* Statt 20px */
    width: 300px;
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    height: fit-content;
    align-self: flex-start; /* Damit es oben bündig ist */
}


.toc-container h3 {
    margin-top: 0;
    font-size: 1.2em;
}

.toc-container ul {
    list-style: none;
    padding-left: 0; /* Entfernt den Standard-Innenabstand */
    margin-left: 0;  /* Entfernt eventuelle Standard-Margins */
}

.toc-container li {
    margin-left: 0; /* Setzt die Hauptüberschriften auf gleiche Linie wie "Inhaltsverzeichnis" */
}

.toc-level-1 a {
    margin-left: 0; /* H1 bündig */
    padding-left: 0; /* Kein zusätzlicher Abstand */
    color: #f7931a;
}

.toc-level-2 a {
    margin-left: 7.5px; /* H2 leicht eingerückt */
    padding-left: 0;
    color: #747474;
}

.toc-level-3 a {
    margin-left: 15px; /* H2 leicht eingerückt */
    padding-left: 0;
    color: #747474;
}

.toc-container a {
    text-decoration: none;
    font-size: 0.95em;
}

.toc-container a:hover {
    text-decoration: underline;
}

.article-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}


.article-box {
    flex-grow: 1;
    background: #fff;
    padding: 30px;
    width: 1000px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 1000px;
}

@media (max-width: 768px) {
    .toc-container {
        display: none;
    }
}

html {
    scroll-behavior: smooth;
}

h1::before, h2::before {
    content: '';
    display: block;
    height: 80px; /* Je nach Header-Größe */
    margin-top: -80px;
    visibility: hidden;
}

.index-resource-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch; /* Sorgt dafür, dass alle Boxen die gleiche Höhe haben */
}

.index-resource-item-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 320px; /* Fixe Basisbreite */
    max-width: 320px;  /* Maximale Breite */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
}

.index-resource-item {
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Inhalte oben ausrichten */
    height: 100%; /* Boxen gleich hoch */
}

.index-resource-item-link:hover .index-resource-item {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.affiliate-container {
    display: flex;
    gap: 20px; /* Abstand zwischen den Boxen */
    justify-content: center;
    align-items: stretch; /* Beide Boxen auf gleiche Höhe bringen */
    flex-wrap: wrap; /* Falls der Platz nicht reicht */
}

.affiliate-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex: 1 1 380px; /* Flexibel, min. 380px */
    max-width: 400px;
    height: 100%; /* Gleiche Höhe */
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.affiliate-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}

.affiliate-image-container {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #f4f4f4;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}

.affiliate-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.affiliate-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.affiliate-text h3 {
    font-size: 1.3em;
    margin-bottom: 0.5em;
    color: #1a2c36;
}

.affiliate-text p {
    font-size: 1em;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1em;
}

.affiliate-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: auto;
    margin-bottom: 0; /* WICHTIG */
    align-items: flex-end; /* Falls irgendwas schief ist */
}

.affiliate-button,
.affiliate-button-outline {
    display: inline-block;
    background-color: #f7931a;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    border: 2px solid #f7931a;
    text-align: center;
    flex-grow: 1;
    box-sizing: border-box;
}

.affiliate-button-outline {
    background-color: white;
    color: #f7931a;
}

.affiliate-button:hover {
    background-color: #ff9f29;
}

.affiliate-button-outline:hover {
    background-color: #f7931a;
    color: white;
}

.affiliate-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap; /* Für kleinere Screens */
}

.affiliate-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 100%; /* Falls du willst, dass sie immer gleich breit sind */
    max-width: 400px; /* Falls du eine max-Breite willst */
    flex: 1; /* Macht die Boxen gleich groß */
    height: auto; /* Flex regelt die Höhe */
    box-sizing: border-box;
}

.affiliate-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.affiliate-buttons {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: auto; /* Wichtig: Drückt die Buttons nach unten */
}

.affiliate-button,
.affiliate-button-outline {
    display: inline-block;
    background-color: #f7931a;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    border: 2px solid #f7931a;
    text-align: center;
    flex-grow: 1; /* Damit beide gleich groß sind */
    box-sizing: border-box;
}

.affiliate-button-outline {
    background-color: white;
    color: #f7931a;
}

.affiliate-button:hover {
    background-color: #ff9f29;
}

.affiliate-button-outline:hover {
    background-color: #f7931a;
    color: white;
}

.bg-section {
    background-color: white; /* oder eine andere Farbe */
    padding: 20px 0; /* sorgt für mehr Luft nach oben und unten */
    border-radius: 24px;
    width: 600;
    height: 300px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.article-box ul,
.article-box ol {
    margin-left: 1.5em; /* Einrückung für bessere Lesbarkeit */
    padding-left: 0;
    max-width: 770px; /* Gleiche Breite wie der Fließtext */
    line-height: 1.8;
    color: #333;
    font-size: 16px;
}

.article-box li {
    margin-bottom: 0.5em; /* Mehr Abstand zwischen Listenelementen */
}

.article-box ol li::marker {
    font-weight: bold;
    color: #f7931a; /* Bitcoin-Orange für Nummern */
}

.article-box ul li::before {
    content: '•'; /* Standard Bullet Point */
    color: #f7931a; /* Bitcoin-Orange */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.article-image-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

.article-box {
    max-width: 100%; /* Für mobile */
    box-sizing: border-box;
    overflow-x: hidden; /* Damit nichts rausläuft */
    padding: 20px; /* oder prüfen, ob padding den Rahmen sprengt */
}

.toc-container li.active a {
    font-weight: bold;
    color: #d17600;
}

#scrollToTopButton {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background-color: #f7931a;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#scrollToTopButton.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

#scrollToTopButton.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 768px) {
    #scrollToTopButton{
        display: none;
    }
}

.article-box h1 {
    font-size: 36px;
    color: #f7931a;
    font-weight: bold;
    margin-top: 50px;
    margin-bottom: 20px;
    margin-left: 0px;
    margin-right: 0px;
    text-align: left;
    border-bottom: 4px solid #f7931a;
    padding-bottom: 8px;
}

.article-box h2 {
    font-size: 28px;
    color: #1a2c36;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 15px;
    border-left: 6px solid #f7931a;
    padding-left: 12px;
    background-color: #fef3e8;
    border-radius: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.article-box h3 {
    font-size: 22px;
    color: #1a2c36;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: 0px;
    border-left: 3px solid #f7931a;
    padding-left: 8px;
    background-color: #f9f9f9;
    border-radius: 3px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.math-box {
    background-color: #f8f9fa;
    border-left: 4px solid #f7931a;
    padding: 10px 15px;
    margin: 8px 0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 5px;
    text-align: left;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.article-box-donation {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    max-width: 15000px;
    width: 100%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.article-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

.article-header .back-link {
    margin-bottom: 10px;
}

.article-header .back-link a {
    text-decoration: none;
    color: #f7931a;
    font-weight: bold;
    display: inline-block;
    transition: color 0.3s ease;
}

.article-header .back-link a:hover {
    color: #d17a0d;
    text-decoration: underline;
}

.comparison-table input[type="number"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    background-color: #f9f9f9;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.comparison-table input[type="number"]:focus {
    border-color: #f7931a;
    outline: none;
    box-shadow: 0 0 5px rgba(247, 147, 26, 0.5);
}

.comparison-table select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.comparison-table select:focus {
    border-color: #f7931a;
    outline: none;
}

.comparison-table input[type="number"],
.comparison-table select {
    width: 100%; /* Wichtig: Füllt die gesamte Tabellenzelle */
    box-sizing: border-box; /* Verhindert, dass Padding die Breite sprengt */
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: #f9f9f9;
}

.efficiency {
    transition: background-color 0.3s ease;
}

.solo-miner-box .article-box {
    max-width: none; /* Falls es auf der Seite limitiert ist */
    width: 100%; /* Oder eine andere Breite, je nachdem was du willst */
}

.solo-miner-box .article-box p {
    max-width: none; /* Damit der Paragraph nicht künstlich begrenzt wird */
    width: 100%; /* Optional */
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

#content {
    flex-grow: 1; /* Lässt den Content-Bereich den restlichen Platz einnehmen */
    display: flex;
    flex-direction: column;
}

#footer-container {
    margin-top: 30px !important;
    background-color: #1a2c36;
    color: white;
    text-align: center;
    font-size: 14px;
}

@media (max-width: 768px) {
    .comparison-table {
        font-size: 12px;
    }

    .comparison-table th,
    .comparison-table td,
    .comparison-table input,
    .comparison-table select {
        font-size: 12px;
        padding: 6px; /* Weniger Innenabstand */
    }

    .comparison-table input[type="number"],
    .comparison-table select {
        padding: 4px;
    }
}

@media (max-width: 768px) {
    .solo-miner-box .article-box {
        padding-left: 16px;
        padding-right: 16px;
    }

.article-box {
    padding-left: 16px;
    padding-right: 16px;
}
    .solo-miner-box .article-box p,
    .solo-miner-box .article-box h2,
    .solo-miner-box .article-box .math-box {
        margin-left: 0;
        margin-right: 0;
    }

    .article-box p,
    .solo-miner-box .article-box h2,
    .solo-miner-box .article-box .math-box {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    #ticker {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between; /* Sorgt für gleichmäßige Verteilung */
        padding: 0 5px; /* Abstand links und rechts */
    }

    #ticker span {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1 1 auto; /* Optional, falls du willst, dass die Spalten etwas flexibler sind */
    }
}

ul {
    list-style-type: none;
    padding-left: 0;
}

.tool-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    background-color: #fff; /* Weißer Hintergrund */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 100%; /* Sicherstellen, dass es nicht größer als der Elterncontainer wird */
    margin-left: auto;
    margin-right: auto;
}

.tool-label {
    font-weight: bold;
    color: #333;
    text-align: left;
}

.tool-input,
.tool-output {
    appearance: none; /* Entfernt die Safari-Standarddarstellung */
    -webkit-appearance: none; /* Für ältere Safari-Versionen */
    -moz-appearance: none; /* Falls irgendwann nötig */
    width: 100%;
    max-width: 100%; /* Damit es sich der SectionArticle anpasst */
    padding: 12px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fafafa;
    font-family: monospace;
    resize: none;
    box-sizing: border-box; /* Wichtig, damit padding und border in die Breite eingerechnet werden */

}

.tool-output {
    height: 100px;
    background-color: #f3f3f3;
}

#blockchain-simulator {
    display: flex;
    justify-content: space-between; /* Damit die Blöcke gleichmäßig verteilt werden */
    flex-wrap: wrap;
    max-width: 100%; /* Oder max-width: 1200px; */
    margin: 0 auto; /* Zentrieren */
    gap: 32px; /* Optional: Abstand zwischen den Blöcken */
}

.block {
    padding: 15px;
    background-color: #eaf4e1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 20px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: 300px;
    flex: 1;
    min-width: 280px;
    max-width: calc((1200px - 2 * 16px) / 3); /* 1200px wie article-container */
    box-sizing: border-box;
    
}

.block input {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 8px;
    font-size: 14px;
}

.block.valid {
    background-color: #d4edda; /* grün */
}

.block.invalid {
    background-color: #f8d7da; /* rot */
}

.block input[type="text"],
.block input[type="number"] {
    width: 100%;
    padding: 8px;
    margin: 5px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    background-color: #ffffff;
}

.block input[type="text"].block-hash,
.block input[type="text"].block-prev-hash {
    background-color: #f3f3f3;
    color: #666;
    border-color: #ddd;
    cursor: not-allowed;
}

.block .mine-btn {
    padding: 8px 12px;
    background-color: #ff9800;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.block .mine-btn:hover {
    background-color: #e68900;
}

.block label {
    display: block;
    text-align: left;
    margin-bottom: 4px;
    font-size: 1rem;
    color: #444;
}

.blockchain-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.block textarea.block-data {
    width: 100%;
    height: 60px; /* Kannst du anpassen */
    box-sizing: border-box;
    resize: vertical; /* Falls man es noch größer ziehen können soll */
    line-height: 1.5; /* Optional, für bessere Lesbarkeit */
    font-family: inherit; /* Damit die gleiche Schriftart wie der Rest verwendet wird */

}

.block input.block-data {
    height: 100px; /* Oder 60px, je nachdem */
}

.block.mining {
    background-color: #f0f0f0; /* oder ein anderes Grau, falls dir das lieber ist */
}

.blockchain-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

#blockchain-controls button {
    background-color: #f7931a;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s ease;
  }
  
  #blockchain-controls button:hover {
    background-color: #e58317;
  }
  
  #blockchain-controls button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    color: #666;
  }

.block-data {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    font-family: inherit;
    background-color: #fff;
    color: #333;
    resize: vertical; /* Falls du das nicht willst: 'none' */
    min-height: 60px; /* Damit es nicht zu klein ist */
    line-height: 1.4;
}
.block-data:focus {
    outline: none;
    border-color: #f7931a;
    box-shadow: 0 0 4px rgba(247, 147, 26, 0.5);
}

.block textarea.block-data {
    width: 100%;
    height: 100px; /* Hier die gewünschte Standardhöhe */
    box-sizing: border-box;
    resize: none; /* Entfernt die Möglichkeit, die Größe zu ändern */
    line-height: 1.5;
    font-family: inherit;
}

input[type="range"] {
    appearance: none; /* Moderne Standard-Eigenschaft */
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none; /* Firefox */
    width: 100%;
    height: 5px;
    background: #f7931a;
    border-radius: 5px;
    outline: none;
    margin: 10px 0;
  }
  
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #f7931a;
    border-radius: 50%;
    cursor: pointer;
  }
  
  input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #f7931a;
    border-radius: 50%;
    cursor: pointer;
  }

  .block h3 {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    background: none;
    border-left: none;
    padding-left: 0;
  }

.block.neutral { background-color: #e0e0e0; } /* Beispiel Grau */
.block.invalid { background-color: #fdd; }   /* Rot */
.block.valid { background-color: #dff0d8; }  /* Grün */
.block.mining { background-color: #e0e0e0; } /* Hellgrau */

input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 5px;
    background: #f7931a;
    border-radius: 5px;
    outline: none;
    margin: 10px 0;
}

/* Toggle Switch Buttons */
.word-count-toggle {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.word-count-toggle button {
    flex: 1;
    padding: 10px;
    background-color: #f4f4f4;
    border: 1px solid #f7931a;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 5px;
}

.word-count-toggle button.active {
    background-color: #f7931a;
    color: white;
}

.word-count-toggle button:hover {
    background-color: #ffe0b3;
}

/* Seed Generieren Button */
#generate-seed-button {
    height: 42px; /* gleiche Höhe wie die "12 Wörter" und "24 Wörter" Buttons */
    background-color: #f7931a;
    color: white;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Kleiner Abstand nach oben */
    margin-bottom: 15px; /* Mehr Abstand nach unten zur Seed-Box */
}

#generate-seed-button:hover {
    background-color: #e67e00;
}

.seed-output {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
    gap: 8px;
}

/* Seed Box */
.seed-output-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 8px;
}
.seed-word {
    background-color: rgba(247, 147, 26, 0.1);
    border: 1px solid #f7931a;
    border-radius: 5px;
    padding: 8px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    min-height: 40px;
    font-weight: bold;
    font-family: 'Nunito', sans-serif;
    color: #333;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.seed-word-number {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #f7931a;
    color: white;
    font-size: 12px;
    font-weight: bold;
    border-radius: 3px;
    padding: 2px 5px;
}

.seed-word-text {
    margin-left: 32px; /* Platz für die Nummer */
    font-size: 16px;
    text-align: center;
    flex-grow: 1;
}

.seed-word:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

.seed-raw-output {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
    background-color: #f9f9f9;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ddd;
    word-wrap: break-word;
    width: 100%;
    box-sizing: border-box;
}

/* Mobile Ansicht: 2 Spalten */
@media (max-width: 768px) {
    .seed-output-box {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hidden {
    display: none;
}

/* Container für die Überschrift und den Button */
.latest-articles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; /* Abstand nach unten zu den Artikeln */
}

/* Linksbündige Überschrift */
.latest-articles-title {
    text-align: center; /* Standardmäßig für alle Viewports */

    font-size: 24px;
    font-weight: bold;
    color: #1a2c36;
    margin: 0; /* Kein zusätzlicher Abstand */
}

/* Button nach rechts */
.latest-articles-button {
    margin: 0;
    padding: 10px 20px;
    background: #f7931a;
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.latest-articles-button:hover {
    background: #e67e00;
}

/* Responsive Anpassung für Mobile */
@media (max-width: 768px) {
    .latest-articles-container {
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Damit es wirklich mittig ist */
        text-align: center;
        width: 100%;
    }

    .latest-articles-title {
        width: 100%;
        text-align: center !important; /* Erzwinge zentrierte Ausrichtung */
        flex-grow: 0 !important; /* Entferne unnötige Flex-Wachstum */
    }

    .latest-articles-button {
        margin-top: 10px;
    }
}

.latest-articles-container {
    max-width: 1150px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    width: 100%;
    margin-top: 40px;
}

/* Standard für Desktop */
.latest-articles-title {
    margin: 0;
    font-size: 1.5rem;
    text-align: left; /* Standard für Desktop */
}


.latest-articles-button {
    padding: 10px 20px;
    font-size: 1rem;
    white-space: nowrap;
    background: #f7931a;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.latest-articles-button:hover {
    background: #e67e00;
}

.latest-articles-divider {
    width: 100%;
    max-width: 1200px;  /* Gleicht sich an den Container an */
    height: 2px;        /* Dicke der Linie */
    background-color: #e0e0e0;  /* Farbe der Linie (passend zur Markierung) */
    border: none;
    margin: 20px auto 20px;  /*Abstand zur Überschrift und den Artikeln */
}

.textbox p {
    width: 100%;
    text-align: center;
}