/* 🎨 GEWÜNSCHTES LAYOUT: Basierend auf den Bildern implementiert */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Amazon Rating Styles - Force Visibility */
.amazon-rating {
    margin: 20px 0 !important;
    padding: 15px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-radius: 8px !important;
    border-left: 4px solid #ff9900 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}

.rating-stars {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.star {
    color: #ff9900 !important;
    font-size: 20px !important;
    margin-right: 2px !important;
}

.star.half {
    position: relative !important;
}

.star.half::after {
    content: '★' !important;
    position: absolute !important;
    left: 0 !important;
    color: #e0e0e0 !important;
    z-index: -1 !important;
}

.rating-text {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.rating-score {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #333 !important;
}

.rating-label {
    color: #666 !important;
    font-size: 14px !important;
}

.rating-source {
    color: #ff9900 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.rating-link {
    margin-top: 8px !important;
}

.amazon-review-link {
    color: #0066cc !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: color 0.2s ease !important;
}

.amazon-review-link:hover {
    color: #004499 !important;
    text-decoration: underline !important;
}

html, body {
    overflow: auto !important;
    min-height: 100vh !important;
    position: relative !important;
    z-index: auto !important;
}

/* 🚨 NOTFALL-CSS: Explizite Sichtbarkeitsregeln */
#allBooks {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 400px !important;
    padding: 1rem !important;
}

.hero {
    max-height: 50vh !important;
    overflow: visible !important;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background-color: #ffffff;
    overflow-x: hidden;
    overflow-y: auto !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* 🎨 HEADER: Dunkelgrauer Hintergrund wie in den Bildern */
.header {
    background: #2c3e50; /* Dunkelgrau wie in den Bildern */
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left {
    text-align: left;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-logo {
    height: 3rem;
    width: auto;
    object-fit: contain;
    min-width: 48px;
    min-height: 48px;
    display: block;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1;
    background: transparent;
    filter: brightness(1.1) contrast(1.1);
    border-radius: 8px;
}

.header-logo:hover {
    transform: scale(1.05);
    filter: brightness(1.2) contrast(1.2);
}

.header-text {
    display: flex;
    flex-direction: column;
}

.header-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    color: white;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.header-subtitle {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.025em;
}

.header-right {
    display: flex;
    align-items: center;
}

/* 🎨 SPRACHUMSCHALTUNG: Einfach und funktional */
.language-switch {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.lang-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.lang-btn.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.lang-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.15);
}

.lang-btn:active {
    transform: scale(0.95);
}

/* 🎨 NAVIGATION: Hellgrauer Hintergrund wie in den Bildern */
.nav {
    background: #ecf0f1; /* Hellgrau wie in den Bildern */
    border-bottom: 1px solid #bdc3c7;
    padding: 0.75rem 0;
}

.desktop-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.desktop-nav a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.desktop-nav a:hover {
    color: #3498db;
    background: rgba(52, 152, 219, 0.1);
}

.nav-logo-item {
    margin-left: auto;
}

.nav-logo-link {
    display: flex;
    align-items: center;
}

.nav-logo {
    height: 2rem;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.nav-logo-link:hover .nav-logo {
    opacity: 1;
}

/* 🎨 MOBILE NAVIGATION: Vereinfacht wie gewünscht */
.mobile-nav {
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav::-webkit-scrollbar {
    display: none;
}

.mobile-nav-link {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.mobile-nav-link:hover {
    color: #3498db;
    background: rgba(52, 152, 219, 0.1);
}

/* 🎨 MOBILE SPRACHUMSCHALTUNG: Touch-optimiert */
.mobile-language-toggle {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid #bdc3c7;
    min-height: 44px;
}

.mobile-lang-btn {
    background: transparent;
    border: none;
    color: #2c3e50;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
}

.mobile-lang-btn.active {
    background: #3498db;
    color: white;
}

.mobile-lang-btn:hover {
    background: rgba(52, 152, 219, 0.1);
}

.mobile-lang-btn:active {
    transform: scale(0.95);
}

.mobile-lang-separator {
    color: #bdc3c7;
    font-weight: 400;
    margin: 0 2px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 🎨 HERO SECTION: Blaue Banner wie in den Bildern */
.hero {
    background: #3498db; /* Blau wie in den Bildern */
    color: white;
    padding: 4rem 0;
    text-align: center;
    position: relative;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    opacity: 0.95;
}

.hero-tagline {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* 🎨 CTA BUTTONS: Rot und Orange wie in den Bildern */
.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    min-width: 200px;
    min-height: 56px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cta-button.primary {
    background: #e74c3c; /* Rot wie in den Bildern */
    color: white;
    border: none;
}

.cta-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    background: #c0392b;
}

.cta-button.secondary {
    background: #f39c12; /* Orange wie in den Bildern */
    color: white;
    border: none;
}

.cta-button.secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
    background: #e67e22;
}

/* 🎨 SECTIONS: Allgemeine Styling für alle Sektionen */
.featured-books, .author-section, .genres-section, .books-section {
    padding: 4rem 0;
    background: white;
}

.featured-books h2, .author-section h2, .genres-section h2, .books-section h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 3rem;
}

/* 🎨 BUCHKARTEN: Saubere weiße Karten ohne Text-Overlays */
.books-grid, .book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    padding: 2rem 0;
}

.book-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #ecf0f1;
}

.book-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.book-image {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.book-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.book-card:hover .book-image img {
    transform: scale(1.05);
}

/* 🚨 TEXT-OVERLAY ENTFERNUNG: Keine Titel über den Covern */
.book-card .book-image *:not(.book-cover-link):not(.book-cover-image):not(img) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0,0,0,0) !important;
}

/* 🚨 HTML-ATTRIBUTE VERSTECKEN: data-* Attribute und style-Attribute ausblenden */
.book-card[data-asin], .book-card[data-has-audiobook], .book-card[data-has-detail-page], .book-card[data-title] {
    /* Diese Attribute sind nur für JavaScript, nicht für die Anzeige */
}

.book-card[data-asin]::before, .book-card[data-asin]::after,
.book-card[data-has-audiobook]::before, .book-card[data-has-audiobook]::after,
.book-card[data-has-detail-page]::before, .book-card[data-has-detail-page]::after,
.book-card[data-title]::before, .book-card[data-title]::after {
    display: none !important;
    content: none !important;
}

/* 🚨 BROKEN HTML-TAGS VERSTECKEN: "erfahren">" Text entfernen */
.book-card *:contains("erfahren\">"), .book-card *:contains("erfahren\">") {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* 🚨 REDUNDANTE TITEL ENTFERNEN: Nur den Haupttitel anzeigen */
.book-card .book-title:not(:first-of-type) {
    display: none !important;
}

/* 🚨 ZUSÄTZLICHE SICHERHEIT: Alle möglichen Text-Overlays */
.book-card .book-image h1, .book-card .book-image h2, .book-card .book-image h3,
.book-card .book-image h4, .book-card .book-image h5, .book-card .book-image h6,
.book-card .book-image p, .book-card .book-image span, .book-card .book-image div,
.book-card .book-image strong, .book-card .book-image em, .book-card .book-image b,
.book-card .book-image i, .book-card .book-image figcaption {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0,0,0,0) !important;
}

.book-content {
    padding: 1.5rem;
}

.book-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.book-title a {
    color: #2c3e50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.book-title a:hover {
    color: #3498db;
}

.book-author {
    font-size: 0.95rem;
    color: #7f8c8d;
    margin-bottom: 1rem;
    font-weight: 500;
}

.book-description {
    font-size: 0.9rem;
    color: #34495e;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* 🎨 BUTTONS: Vertikal gestapelt mit verschiedenen Farben */
.book-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.book-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-align: center;
    min-height: 44px;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    background: #3498db;
    color: white;
}

.book-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.book-link.learn-more {
    background: #9b59b6; /* Lila */
    color: white;
}

.book-link.learn-more:hover {
    background: #8e44ad;
}

.book-link.amazon-de {
    background: #e67e22; /* Orange */
    color: white;
}

.book-link.amazon-de:hover {
    background: #d35400;
}

.book-link.amazon-us {
    background: #34495e; /* Dunkelgrau */
    color: white;
}

.book-link.amazon-us:hover {
    background: #2c3e50;
}

.book-link.apple-books {
    background: #3498db; /* Blau */
    color: white;
}

.book-link.apple-books:hover {
    background: #2980b9;
}

.book-link.books2read {
    background: #27ae60; /* Grün */
    color: white;
}

.book-link.books2read:hover {
    background: #229954;
}

.book-link.audiobook {
    background: #9b59b6; /* Lila */
    color: white;
}

.book-link.audiobook:hover {
    background: #8e44ad;
}

/* 🎨 MEHR ERFAHREN BUTTON: Als echter Button */
.mehr-button, .learn-more-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: #9b59b6;
    color: white;
    margin-top: 0.75rem;
    min-height: 44px;
}

.mehr-button:hover, .learn-more-button:hover {
    background: #8e44ad;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

/* 🎨 AUTHOR SECTION: Styling für die Autor-Sektion */
.author-section {
    background: #f8f9fa;
}

.author-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}

.author-image img {
    width: 100%;
    max-width: 300px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.author-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-logo {
    height: 2rem;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.section-logo-link:hover .section-logo {
    opacity: 1;
}

.author-text h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.author-text p {
    font-size: 1rem;
    color: #34495e;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.author-links {
    display: flex;
    gap: 1rem;
}

.author-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.author-links a:hover {
    background: #2980b9;
    transform: translateY(-1px);
}

/* 🎨 GENRES SECTION: Styling für die Genres-Sektion */
.genres-section {
    background: white;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.genres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.genre-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #ecf0f1;
}

.genre-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.genre-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.genre-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 1rem;
}

.genre-card p {
    font-size: 0.9rem;
    color: #34495e;
    line-height: 1.6;
}

/* 🎨 BOOKS SECTION: Styling für die Bücher-Sektion */
.books-section {
    background: #f8f9fa;
}

.books-header {
    margin-bottom: 3rem;
}

.books-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.search-box input {
    padding: 0.75rem 1rem;
    border: 1px solid #bdc3c7;
    border-radius: 8px;
    font-size: 0.9rem;
    min-width: 250px;
}

.filter-dropdown select {
    padding: 0.75rem 1rem;
    border: 1px solid #bdc3c7;
    border-radius: 8px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
}

/* 🎨 FOOTER: Styling für den Footer */
.footer {
    background: #2c3e50;
    color: white;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
}

.footer-links, .social-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a, .social-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover, .social-links a:hover {
    color: white;
}

.footer-logo {
    height: 3rem;
    width: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-logo-link:hover .footer-logo {
    opacity: 1;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.8);
}

.footer-legal {
    display: flex;
    gap: 1rem;
}

.footer-legal a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: white;
}

/* 🎨 RESPONSIVE DESIGN: Mobile-first Ansatz */
@media screen and (max-width: 768px) {
    .desktop-nav { display: none; }
    .mobile-nav { display: flex; }
    
    .header-title {
        font-size: 1.5rem;
    }
    
    .header-subtitle {
        font-size: 0.85rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-tagline {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .cta-button {
        width: 100%;
        max-width: 300px;
    }
    
    .books-grid, .book-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1rem 0;
    }
    
    .book-card {
        margin: 0 1rem;
    }
    
    .book-image {
        height: 250px;
    }
    
    .book-content {
        padding: 1rem;
    }
    
    .book-title {
        font-size: 1.1rem;
    }
    
    .book-description {
        font-size: 0.85rem;
    }
    
    .book-links {
        gap: 0.5rem;
    }
    
    .book-link {
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
        min-height: 40px;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        z-index: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }
    
    .author-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .author-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .genres-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .books-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .search-box input {
        min-width: 200px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
    
    .header-brand {
        gap: 1rem;
    }
    
    .header-logo {
        height: 2.5rem;
    }
    
    .hero {
        padding: 3rem 0;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .book-card {
        margin: 0 0.5rem;
    }
    
    .book-image {
        height: 200px;
    }
}

/* 🚨 MOBILE-LAYOUT-FIXES: Umfassende Behebung aller mobilen Probleme */
@media screen and (max-width: 768px) {
    /* 🚨 ULTIMATIVE TEXT-OVERLAY-ENTFERNUNG: Alle möglichen Text-Elemente */
    .book-card .book-image *:not(.book-cover-link):not(.book-cover-image):not(img) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        z-index: -1 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        clip: rect(0,0,0,0) !important;
    }
    
    /* 🚨 TAB-BUTTONS KOMPLETT AUSBLENDEN: "Beschreibung", "Metadaten", "Weitere Ausgaben" */
    .tab-buttons, .book-info-tabs, .book-info-tab, .book-info-tab-button, .book-tab-button, [class*="tab-button"], [class*="info-tab"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        z-index: -1 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        clip: rect(0,0,0,0) !important;
    }
    
    /* 🚨 ZWISCHENTEXTE ENTFERNEN: Alle unerwünschten Text-Fragmente zwischen Buttons */
    .book-card .book-content *:not(.book-title):not(.book-author):not(.book-description):not(.book-links):not(.mehr-button):not(.learn-more-button) {
        font-size: 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        z-index: -1 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        clip: rect(0,0,0,0) !important;
    }
    
    /* 📱 MOBILE: Sprachumschaltung reparieren - Touch-Events und Sichtbarkeit */
    .mobile-lang-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        min-height: 44px !important;
        min-width: 44px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        position: relative !important;
        z-index: 10 !important;
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
        color: #2c3e50 !important;
        transition: all 0.3s ease !important;
    }
    
    .mobile-lang-btn:active {
        transform: scale(0.95) !important;
        background: rgba(52, 152, 219, 0.2) !important;
    }
    
    .mobile-lang-btn.active {
        background: #3498db !important;
        color: white !important;
    }
    
    .mobile-language-toggle {
        display: flex !important;
        align-items: center;
        background: rgba(255, 255, 255, 0.9) !important;
        border-radius: 8px !important;
        padding: 4px !important;
        border: 1px solid #bdc3c7 !important;
        min-height: 44px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* 📱 MOBILE: Hörbuch-Buttons korrekt anzeigen - für alle Bücher mit hasAudiobook=true */
    .book-card[data-has-audiobook="true"] .book-link.audiobook {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
        background: #9b59b6 !important;
        color: white !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        min-height: 44px !important;
    }
    
    /* 📱 MOBILE: Hörbuch-Buttons für Bücher ohne Audiobook ausblenden */
    .book-card[data-has-audiobook="false"] .book-link.audiobook, .book-card:not([data-has-audiobook]) .book-link.audiobook {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        z-index: -1 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        font-size: 0 !important;
        line-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        clip: rect(0,0,0,0) !important;
    }
    
    /* 📱 MOBILE: Button-Layout optimieren - Linear und responsiv */
    .book-links {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    /* 📱 MOBILE: Mehr erfahren Button optimieren */
    .mehr-button, .learn-more-button {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1rem !important;
        border-radius: 8px !important;
        background: #9b59b6 !important;
        color: white !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        margin-top: 0.75rem !important;
        min-height: 44px !important;
        width: 100% !important;
    }
    
    /* 📱 MOBILE: Buchcover optimieren */
    .book-card .book-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    /* 📱 MOBILE: Buchbeschreibung linear anzeigen */
    .book-description {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        text-overflow: unset !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
    }
}

/* 🚫 EXTERNE INHALTE BLOCKIEREN: Amazon, Apple und andere Widgets dauerhaft verstecken */
/* Amazon Widgets und Overlays - aber nur die Widgets, nicht die Links in Buchkarten */
.amzn-product-block, .amazon-product-block, 
[class*="amzn"]:not(.book-card *), [class*="amazon"]:not(.book-card *), 
[id*="amzn"]:not(.book-card *), [id*="amazon"]:not(.book-card *),
[data-amzn]:not(.book-card *), [data-amazon]:not(.book-card *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0,0,0,0) !important;
}

/* Apple Books Widgets und Overlays - aber nur die Widgets, nicht die Links in Buchkarten */
.apple-books-widget:not(.book-card *), 
[class*="apple"]:not(.book-card *), [id*="apple"]:not(.book-card *), 
[class*="books"]:not(.book-card *), [id*="books"]:not(.book-card *),
[data-apple]:not(.book-card *), [data-books]:not(.book-card *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0,0,0,0) !important;
}

/* Alle möglichen externen Widgets und Overlays - aber nur außerhalb der Buchkarten */
[class*="widget"]:not(.book-card *), [id*="widget"]:not(.book-card *),
[class*="overlay"]:not(.book-card *), [id*="overlay"]:not(.book-card *),
[class*="embed"]:not(.book-card *), [id*="embed"]:not(.book-card *),
[class*="iframe"]:not(.book-card *), [id*="iframe"]:not(.book-card *),
[class*="script"]:not(.book-card *), [id*="script"]:not(.book-card *),
[class*="external"]:not(.book-card *), [id*="external"]:not(.book-card *),
[class*="third-party"]:not(.book-card *), [id*="third-party"]:not(.book-card *),
[class*="api"]:not(.book-card *), [id*="api"]:not(.book-card *),
[class*="sdk"]:not(.book-card *), [id*="sdk"]:not(.book-card *),
[class*="plugin"]:not(.book-card *), [id*="plugin"]:not(.book-card *),
[class*="addon"]:not(.book-card *), [id*="addon"]:not(.book-card *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0,0,0,0) !important;
}

/* Externe iframes blockieren - aber nur die, die nicht in Buchkarten sind */
iframe[src*="amazon"]:not(.book-card *), iframe[src*="amzn"]:not(.book-card *),
iframe[src*="apple"]:not(.book-card *), iframe[src*="books"]:not(.book-card *),
iframe[src*="widget"]:not(.book-card *), iframe[src*="overlay"]:not(.book-card *),
iframe[src*="embed"]:not(.book-card *), iframe[src*="external"]:not(.book-card *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    border: 0 !important;
    clip: rect(0,0,0,0) !important;
}

/* Externe Scripts blockieren - aber nur die, die nicht in Buchkarten sind */
script[src*="amazon"]:not(.book-card *), script[src*="amzn"]:not(.book-card *),
script[src*="apple"]:not(.book-card *), script[src*="books"]:not(.book-card *),
script[src*="widget"]:not(.book-card *), script[src*="overlay"]:not(.book-card *),
script[src*="embed"]:not(.book-card *), script[src*="external"]:not(.book-card *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0,0,0,0) !important;
}

/* Externe Styles blockieren - aber nur die, die nicht in Buchkarten sind */
link[href*="amazon"]:not(.book-card *), link[href*="amzn"]:not(.book-card *),
link[href*="apple"]:not(.book-card *), link[href*="books"]:not(.book-card *),
link[href*="widget"]:not(.book-card *), link[href*="overlay"]:not(.book-card *),
link[href*="embed"]:not(.book-card *), link[href*="external"]:not(.book-card *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    z-index: -1 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0,0,0,0) !important;
}

/* 🚨 BUCHKARTEN SCHÜTZEN: Sicherstellen, dass Buchkarten und deren Inhalte sichtbar bleiben */
.book-card,
.book-card *,
.book-card .book-title,
.book-card .book-author,
.book-card .book-description,
.book-card .book-links,
.book-card .book-content,
.book-card .book-image,
.book-card .book-cover-link,
.book-card .book-cover-image,
.book-card .book-link,
.book-card .mehr-button,
.book-card .learn-more-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: inherit !important;
    padding: inherit !important;
    border: inherit !important;
    clip: auto !important;
}

/* 🚨 CONTAINER SICHTBARKEIT GARANTIEREN: Wichtigste Container explizit sichtbar machen */
#allBooks,
#featuredBooks,
.books-grid,
.book-grid,
.books-section,
.featured-books {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    min-height: 100px !important;
    padding: 1rem !important;
    margin: 1rem 0 !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
}

/* 🚨 HERO-SECTION HÖHE BEGRENZEN: Verhindert, dass Hero den gesamten Viewport einnimmt */
.hero {
    min-height: auto !important;
    max-height: 80vh !important;
    overflow: visible !important;
    position: relative !important;
    z-index: auto !important;
}

/* 🚨 OVERLAY-ENTFERNUNG: Alle weißen Overlays mit hohem z-index entfernen */
*[style*="z-index: 9999"], *[style*="z-index: 999"], *[style*="z-index: 1000"] {
    background: transparent !important;
    pointer-events: none !important;
}

/* 🚨 SCROLLBARKEIT GARANTIEREN: Alle Container scrollbar machen */
.container, .books-section, .featured-books, .author-section, .genres-section {
    overflow: visible !important;
    position: relative !important;
    z-index: auto !important;
    min-height: auto !important;
}

/* 🚨 FINALE HARTE CSS-REGELN: Alles sichtbar machen - auch elterliche Container */
body, html {
    overflow: auto !important;
    height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    z-index: auto !important;
    width: auto !important;
    pointer-events: auto !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: inherit !important;
    padding: inherit !important;
    border: inherit !important;
    clip: auto !important;
}

#allBooks {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: 500px !important;
    padding: 1rem !important;
}

main, .container, .books-grid, .book-grid {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Detailed Book Page Layout Enhancements */
.book-detail-grid {
    display: grid !important;
    grid-template-columns: 300px 1fr !important;
    gap: 40px !important;
    margin: 40px 0 !important;
}

.book-detail-cover {
    text-align: center !important;
}

.book-detail-image {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.book-detail-header {
    margin-bottom: 30px !important;
}

.book-detail-title {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    line-height: 1.2 !important;
}

.book-detail-author {
    font-size: 1.1rem !important;
    color: #666 !important;
    margin-bottom: 20px !important;
    font-style: italic !important;
}

.book-detail-description {
    margin-bottom: 30px !important;
}

.book-detail-description h2 {
    font-size: 1.3rem !important;
    color: #333 !important;
    margin-bottom: 15px !important;
}

.book-detail-description p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #555 !important;
}

.book-detail-meta {
    margin-bottom: 30px !important;
}

.meta-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
    gap: 15px !important;
}

.meta-item {
    background: #f8f9fa !important;
    padding: 12px 15px !important;
    border-radius: 6px !important;
    border-left: 3px solid #007bff !important;
}

.meta-label {
    font-weight: 600 !important;
    color: #333 !important;
    margin-right: 8px !important;
}

.meta-value {
    color: #666 !important;
}

.book-detail-actions {
    margin-bottom: 40px !important;
}

.book-detail-actions h3 {
    font-size: 1.4rem !important;
    color: #333 !important;
    margin-bottom: 20px !important;
}

.action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    margin-top: 20px !important;
}

.action-buttons h4 {
    font-size: 1.1rem !important;
    color: #555 !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid #e9ecef !important;
    padding-bottom: 5px !important;
}

.action-btn {
    display: inline-block !important;
    padding: 12px 20px !important;
    background: #007bff !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    margin-bottom: 8px !important;
}

.action-btn:hover {
    background: #0056b3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

.action-btn.amazon-de {
    background: #ff9900 !important;
}

.action-btn.amazon-de:hover {
    background: #e68900 !important;
}

.action-btn.amazon-com {
    background: #232f3e !important;
}

/* Purchase Button Styles for Book Pages */
.purchase-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    min-width: 200px !important;
    cursor: pointer !important;
}

.purchase-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.purchase-button.amazon-de {
    background: linear-gradient(135deg, #ff9900 0%, #ff7700 100%) !important;
    color: white !important;
}

.purchase-button.amazon-de:hover {
    background: linear-gradient(135deg, #ff7700 0%, #ff5500 100%) !important;
}

.purchase-button.amazon-us {
    background: linear-gradient(135deg, #232f3e 0%, #131921 100%) !important;
    color: white !important;
}

.purchase-button.amazon-us:hover {
    background: linear-gradient(135deg, #131921 0%, #000000 100%) !important;
}

.purchase-button.apple-books {
    background: linear-gradient(135deg, #007aff 0%, #0051d5 100%) !important;
    color: white !important;
}

.purchase-button.apple-books:hover {
    background: linear-gradient(135deg, #0051d5 0%, #0033aa 100%) !important;
}

.purchase-button.books2read {
    background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%) !important;
    color: white !important;
}

.purchase-button.books2read:hover {
    background: linear-gradient(135deg, #1e7e34 0%, #145523 100%) !important;
}

.action-btn.amazon-com:hover {
    background: #1a2532 !important;
}

.action-btn.apple-books {
    background: #007aff !important;
}

.action-btn.apple-books:hover {
    background: #0056cc !important;
}

.action-btn.books2read {
    background: #28a745 !important;
}

.action-btn.books2read:hover {
    background: #218838 !important;
}

.back-to-overview {
    margin-top: 20px !important;
}

.btn-back {
    display: inline-block !important;
    padding: 10px 20px !important;
    background: #6c757d !important;
    color: white !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: background 0.3s ease !important;
}

.btn-back:hover {
    background: #5a6268 !important;
}

/* Breadcrumb Navigation */
.breadcrumb {
    background: #f8f9fa;
    padding: 1rem 0;
    border-bottom: 1px solid #e9ecef;
}

.breadcrumb-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item:not(:last-child)::after {
    content: "›";
    margin: 0 0.5rem;
    color: #6c757d;
}

.breadcrumb-item a {
    color: #007bff;
    text-decoration: none;
    font-size: 0.9rem;
}

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

.breadcrumb-item[aria-current="page"] {
    color: #6c757d;
    font-weight: 500;
}

/* Book Detail Page Layout */
.book-detail-page {
    padding: 2rem 0;
}

.book-detail-content {
    max-width: 1200px;
    margin: 0 auto;
}

.book-detail-header {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.book-detail-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

/* Responsive Design for Detailed Page */
@media screen and (max-width: 768px) {
    .book-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .book-detail-header {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .book-detail-title {
        font-size: 1.8rem !important;
    }
    
    .meta-grid {
        grid-template-columns: 1fr !important;
    }
    
    .action-buttons {
        gap: 15px !important;
        flex-direction: column !important;
    }
    
    .purchase-button {
        width: 100% !important;
        min-width: auto !important;
    }
}