/*
Theme Name: Mika220175 Custom Theme
Theme URI: https://mika220175.de
Author: Mika220175 & Gemini
Author URI: https://mika220175.de
Description: Dieses Theme ist ein echtes Herzensprojekt: Ich habe es ursprünglich rein für meinen eigenen Blog entwickelt und in enger Zusammenarbeit mit der KI Google Gemini Schritt für Schritt aufgebaut. Das Ergebnis ist ein maßgeschneidertes, hochperformantes WordPress-Theme – kompromisslos optimiert auf Mobile-First-Darstellung und moderne Flexbox-Technologie, völlig ohne unnötigen Code-Ballast. Es ist mit schlanken, nativen Modulen für FAQs, Lesezeichen und Downloads im modernen HTML5-Akkordeon-Design ausgestattet, bringt ein eigenes Medienordner-System mit und versteckt ein exklusives Admin-Dashboard für den schnellen Zugriff direkt im Footer. Da ich an den Open-Source-Gedanken glaube, stelle ich mein Theme hier jedem frei und kostenlos zur Verfügung! Ich hoffe, es gefällt dir genauso gut wie mir.
 
Kontakt: mika220175@gmail.com
 
------------------------------------------------------------------------------------------------------
Rechtlicher Hinweis: Die Bereitstellung erfolgt rein von privat, absolut kostenlos und 'wie gesehen'. Jegliche Gewährleistung, Garantie oder Haftung für Schäden, Datenverluste oder Fehlfunktionen, die durch die Nutzung dieses Themes entstehen könnten, wird hiermit ausdrücklich und vollständig ausgeschlossen. Die Verwendung erfolgt auf eigene Gefahr.
Version: 2.0
Tags: custom-theme, flexbox, lightweight, fast, dark-mode-ready, custom-modules, mobile-first, ai-assisted, open-source
Text Domain: mika220175
*/

:root {
    --bg-color: #f4f6f8;
    --text-color: #333333;
    --link-color: #0073aa;
    --font-family: sans-serif;
    --header-bg: #ffffff;
    --menu-active-color: #0073aa;
    --blog-box-bg: #ffffff;
    --blog-title-font: sans-serif;
    --blog-title-color: #333333;
    --blog-text-color: #666666;
    --sidebar-bg: #ffffff;
    --sidebar-font: sans-serif;
    --sidebar-text-color: #333333;
    --search-border-color: #cccccc;
}

body { margin: 0; font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-color); font-size: 12px; }
a { color: var(--link-color); text-decoration: none; }

/* Seiten-Layout & Grid */
.site-content-wrapper { display: flex; max-width: 1200px; margin: 40px auto; padding: 0 20px; gap: 40px; }
.blog-main { flex: 7; }
.post-main, .page-main { flex: 7; box-sizing: border-box; background: transparent; box-shadow: none; padding: 0; }
.page-content-wrapper { justify-content: center; }
.page-with-sidebar { flex: 7; width: 100%; }
.page-fullwidth { flex: 1; width: 100%; max-width: 100%; }

@media (max-width: 768px) {
    .site-content-wrapper { flex-direction: column; }
}

/* ==========================================================================
   STERNE ZUM BEWERTEN (OHNE RAND)
   ========================================================================== */
.star-rating label {
    color: #cccccc;                  /* Farbe für leere Sterne */
    font-size: 28px;                 
    cursor: pointer;
    transition: color 0.2s ease;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #ffcc00;                  /* Füllfarbe Goldgelb */
}

.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;     
    justify-content: flex-end;
}

.star-rating input[type="radio"] {
    display: none;
}

/* ==========================================================================
   RATING ZUSAMMENFASSUNG (Einzelansicht)
   ========================================================================== */
.rating-average-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Stern in der Zusammenfassung (OHNE Rand) */
.summary-star {
    color: #ffcc00; 
    font-size: 1.1em; 
}

/* Die Durchschnittsbewertung (Dickes Schwarz, dezenter) */
.avg-score {
    color: #000000 !important;      
    font-weight: 900 !important;    
    font-size: 1.05em; /* Etwas kleiner als vorher */               
    line-height: 1;
}

.avg-count-wrapper {
    color: #666666; 
    font-size: 0.85em; 
    font-weight: normal; 
}

/* ==========================================================================
   RATING ZUSAMMENFASSUNG – KLEINE VERSION (Blog-Übersicht)
   ========================================================================== */
.rating-summary-small {
    gap: 4px;
    margin-top: 6px; 
    display: inline-flex;
    align-items: center;
}

.rating-summary-small .summary-star {
    font-size: 0.9em;
    color: #ffcc00;
}

.rating-summary-small .avg-score {
    font-size: 0.8em; /* Etwas kleiner für die Übersicht */
    font-weight: 900 !important;
}

.rating-summary-small .avg-count-wrapper {
    font-size: 0.7em;
    color: #666666;
}
/* ==========================================================================
   SIDEBAR AKKORDEON (Sichere CSS-Variante)
   ========================================================================== */

/* Titel klickbar machen und Layout vorbereiten */
.blog-sidebar .sidebar-title {
    cursor: pointer;
    position: relative;
    user-select: none;
    padding-right: 25px; /* Platz für unseren Pfeil */
}

/* Der feine Pfeil rechts */
.blog-sidebar .sidebar-title::after {
    content: "▼";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    color: var(--text-color);
    transition: transform 0.2s ease-in-out;
}

/* Pfeil um 90 Grad drehen, wenn die Box geschlossen ist */
.blog-sidebar .sidebar-box.box-closed .sidebar-title::after {
    transform: translateY(-50%) rotate(-90deg);
}

/* Den Inhalt unterhalb der Überschrift sauber ausblenden */
.blog-sidebar .sidebar-box.box-closed > ul,
.blog-sidebar .sidebar-box.box-closed > .tagcloud {
    display: none !important;
}

/* Verhindert ein Aufblitzen leerer Abstände bei geschlossener Box */
.blog-sidebar .sidebar-box.box-closed {
    margin-bottom: 20px;
}