/* -------------------------------------------------------------------
 * ATARI ST FONT FACE DEFINITION
 * Lädt den lokalen Font für die Verwendung in der .colorcycle Klasse.
 * -------------------------------------------------------------------
 */
@font-face {
    font-family: 'AtariST';
    src: url('../fonts/Atari_ST_8x16_System_Font.woff2') format('woff2'),
         url('../fonts/Atari_ST_8x16_System_Font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* -------------------------------------------------------------------
 * THEME-ANPASSUNGEN
 * Überschreibt Bootstrap-Variablen für Dark/Light Mode
 * -------------------------------------------------------------------
 */

/* 1. KARTEN (CARDS) */
/* --- Wenn das Theme "dark" ist --- */
html[data-bs-theme="dark"] .card {
    /* Setzt den spezifischen dunklen Hintergrund */
    --bs-card-bg: #282a2c; 
    /* Stellt sicher, dass die Schriftfarbe weiß bleibt */
    --bs-body-color: #ffffff;
}

/* --- Wenn das Theme "light" ist --- */
html[data-bs-theme="light"] .card {
    /* Hellt den Bootstrap-Standard "body-tertiary" Hintergrund leicht ab */
    --bs-card-bg: #f8f8f8; 
}

/* 2. RAHMEN FÜR LEAD-IN (Gilt jetzt IMMER) */
.leadin-text-justify {
    border: 1px solid var(--bs-border-color-translucent) !important; 
}

/* 3. ANPASSUNG VON LINKS IM DARK THEME */
html[data-bs-theme="dark"] a {
    color: var(--bs-info); /* Eine abgeschwächte, hellere Blau- oder Türkis-Variante */
}
html[data-bs-theme="dark"] a:hover {
    color: #4dd5ff; /* Etwas heller beim Hover */
}


/* -------------------------------------------------------------------
 * FLUID TYPOGRAPHY
 * -------------------------------------------------------------------
 */

/* H1 - Display/Main Titles (z.B. im Header Jumbotron) */
h1.display-4, h1:not(.card-title) { /* Ziel: nur der große Header-Titel */
    font-size: clamp(2rem, 5vw + 1rem, 4rem) !important; 
    /* ATARI ST FONT BEIBEHALTEN NUR FÜR DEN HAUPT-HEADER */
    font-family: 'AtariST', monospace !important; 
    text-transform: uppercase;
}

/* H1 & H2 in Cards (Post- und Page-Titel) */
h1.card-title, h2.card-title {
    /* Schriftgröße verkleinert (Max: 2.2rem) */
    font-size: clamp(1.4rem, 2.5vw + 0.5rem, 2.2rem);
    /* ÄNDERUNG: AtariST Font entfernt, auf Standard-Schrift zurückgesetzt */
    /* text-transform beibehalten für einheitlichen Stil */
    text-transform: uppercase; 
    line-height: 1.1; 
}

/* Standard Content Text (P, Card-Text) */
.card-text, p {
    font-size: clamp(1rem, 1vw + 0.5rem, 1.25rem);
}

/* Lead Text (z.B. im Lead-in Block) */
.leadin-text-justify p.lead {
    font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.4rem) !important;
    margin-left: 0;
}

/* Header Jumbotron Subtitle */
.header-content p.lead {
    font-size: clamp(1.2rem, 1.8vw + 0.5rem, 1.8rem);
}

/* -------------------------------------------------------------------
 * Standard-Styling
 * -------------------------------------------------------------------
 */
body {
    transition: background-color 0.5s ease, color 0.5s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Extra Padding für den Fixed Footer */
    padding-bottom: 70px !important; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.content {
    flex: 1;
}
.form-switch { min-height: 1.5rem; }
.header-jumbotron {
    background-image: url('../images/header-image.jpg'); 
    background-size: cover;
    background-position: center;
    height: 300px; 
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    max-width: 100%; 
    margin: 0; 
    border-radius: 0.5rem; 
    overflow: hidden; 
}
.header-jumbotron::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
}
.header-content { position: relative; z-index: 10; padding: 20px; }
.post-title-link { text-decoration: none; color: inherit; }
.post-title-link:hover { text-decoration: underline; }

/* CSS für Lead-in Blocksatz und Silbentrennung */
.leadin-text-justify p {
    text-align: justify;
    hyphens: auto;
    -ms-hyphens: auto; 
    -moz-hyphens: auto; 
    -webkit-hyphens: auto;
}

/* Style für Creative Commons Logo */
.cc-logo { height: 24px; vertical-align: middle; margin-right: 5px; }
.navbar-brand i { margin-right: 8px; vertical-align: middle; }

/* Entfernt Padding für den Hauptinhalt, behält aber die maximale Breite */
.container-no-padding {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* CSS für den fixed Footer mit Container-Breite */
.footer-fixed-width {
    position: fixed; 
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); 
    width: 100%; 
    max-width: 100%;
    z-index: 1030; 
}

/* Manuelle Breitenanpassung an Bootstrap-Container-Größen */
@media (min-width: 576px) { .footer-fixed-width { max-width: 540px; } }
@media (min-width: 768px) { .footer-fixed-width { max-width: 720px; } }
@media (min-width: 992px) { .footer-fixed-width { max-width: 960px; } }
@media (min-width: 1200px) { .footer-fixed-width { max-width: 1140px; } }
@media (min-width: 1400px) { .footer-fixed-width { max-width: 1320px; } }

/* -------------------------------------------------------------------
 * CODE STYLING
 * -------------------------------------------------------------------
 */
/* Inline Code */
code {
    color: var(--bs-pink); 
    background-color: var(--bs-body-bg); 
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 85%;
}

/* Code Blocks (Pre-Tags) */
pre {
    border: 1px solid var(--bs-border-color-translucent);
    background-color: var(--bs-body-tertiary); /* Leicht anderer Hintergrund */
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
}

/* -------------------------------------------------------------------
 * COLOR CYCLE & RETRO CURSOR
 * -------------------------------------------------------------------
 */
.colorcycle {
    font-size: 1rem;
    font-family: 'AtariST', monospace; 
    animation: colorcycle 10s infinite; 
}

/* Keyframes für die Farbwechsel-Animation */
@keyframes colorcycle {
    0%   { color: red; }
    16%  { color: orange; }
    33%  { color: yellow; }
    50%  { color: green; }
    66%  { color: blue; }
    83%  { color: indigo; }
    100% { color: violet; }
}

/* Retro Cursor */
.text-retro-cursor::after {
    content: '_'; /* Simuliert den Block-Cursor */
    animation: blink-cursor 1s infinite step-end;
    margin-left: 2px;
}

@keyframes blink-cursor {
    from, to { color: transparent }
    50% { color: inherit }
}

.mrkdwn-h3 {
    font-family: 'AtariST', monospace;
}

/*
 * Übergangseffekte für Social Media Buttons im Footer
 * Fügt einen weichen Übergang für Farbe und Rahmen hinzu (Footer-Social-Buttons).
 */
.footer-social-button {
    /* Setzt die Dauer und Art des Übergangs (0.3s weich) für alle relevanten Eigenschaften */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Hover-Effekt für Dark Mode (Standard) */
[data-bs-theme="dark"] .footer-social-button:hover {
    /* Ändert die Hintergrundfarbe leicht, um den Button zu betonen */
    background-color: var(--bs-gray-700); 
    /* Ändert die Rahmenfarbe auf die primäre Farbe */
    border-color: var(--bs-primary) !important; 
    /* Ändert die Icon-Farbe auf die primäre Farbe */
    color: var(--bs-primary) !important;
}

/* Hover-Effekt für Light Mode */
[data-bs-theme="light"] .footer-social-button:hover {
    /* Ändert die Hintergrundfarbe leicht, um den Button zu betonen */
    background-color: var(--bs-gray-300); 
    /* Ändert die Rahmenfarbe auf die primäre Farbe */
    border-color: var(--bs-primary) !important; 
    /* Ändert die Icon-Farbe auf die primäre Farbe */
    color: var(--bs-primary) !important;
}