/*
Theme Name: Twenty Seventeen Child
Theme URI: https://fraktur-magazin.de
Description: Updatesicheres Child-Theme fuer Fraktur - Das Magazin
Author: Andreas Waldera
Template: twentyseventeen
Version: 1.0.0
Text Domain: twentyseventeen-child
*/

.entry-footer {
display:none;
}

.headerimg {
width:1200px;
min-height:300px;
background: url(https://fraktur-magazin.de/wp/wp-content/uploads/2018/05/fraktur_banner_2018_03.jpg) no-repeat;
background-position: center center;
background-size: auto;
margin: 0 auto;
}

@media screen and (max-width: 1024px) {
.headerimg {
width:100%;
margin: 0; 
} 
}

@media screen and (max-width: 767px) {
.headerimg {
min-height:250px;
background-size:800px auto; 
}
}

@media screen and (max-width: 480px) {
.headerimg {
min-height:100px;
background-size:480px auto; 
}
}


.entry-content a[href^="http://"]:not([href*="fraktur-magazin.de"]):after,
.entry-content a[href^="https://"]:not([href*="fraktur-magazin.de"]):after {
font: normal 18px/1 'Arial';
content: "➚";
color: #0A25CD; font-weight: bold;
padding-left:3px;
font-size: 1em;
}



.entry-content .more-link:before {margin-top:0; }
.entry-content .more-link:hover {background-color: #cccccc; color: #000000; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; transition:none;}

.more-link {background-color: #cccccc; color: #000000; font-weight: 100 !important; padding: 5px; border-radius: 5px; display: block; width: 110px; margin-top: 10px; text-align: center; }


mark {
background-color: #FFFF00; 
}


.wp-block-rss__item {font-size: 90%;}
.wp-block-rss__item-title {font-weight: bold;}

/*Meta Daten ausblenden*/
.entry-meta {
display:none;
}

.author_bio_section{
background-color: #F5F5F5;
padding: 15px;
border: 1px solid #ccc;
}
  
/*Autorenbox*/
.author_name{
font-size:16px;
font-weight: bold;
}
  
.author_details img {
border: 1px solid #D8D8D8;
border-radius: 50%;
float: left;
margin: 0 10px 10px 0;
}


/* ==================================
   STARTSEITEN-OPTIMIERUNG    ====== */

/* 1. Entfernung aller Unterstreichungen und Linien bei Links NUR auf der Hauptseite */
.home a,
.home a:hover,
.home a:focus,
.home .entry-title a,
.home .entry-title a:hover,
.home .entry-title a:focus,
.home .wp-block-latest-posts a,
.home .wp-block-latest-posts a:hover,
.home .wp-block-latest-posts a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* 2. EIFEL-FOKUS: Die drei Kacheln als einheitliche Boxen formatieren */
.wp-block-latest-posts.wp-block-latest-posts__list.is-grid li {
    border: 1px solid #e5e5e5;
    padding: 12px;
    background: #fefefe;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
    display: block;
}

/* 3. EIFEL-FOKUS: Effekt beim Drüberfahren (Hover) mit der Maus */
.wp-block-latest-posts.wp-block-latest-posts__list.is-grid li:hover {
    border-color: #999999;
    background: #f9f9f9;
    cursor: pointer;
}

/* 4. EIFEL-FOKUS: Bilder auf einheitliche Höhe und Format zwingen */
.wp-block-latest-posts__featured-image img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
}

/* 5. EIFEL-FOKUS: NUR im dreispaltigen Raster die Titel-Höhe angleichen */
.wp-block-latest-posts.is-grid .wp-block-latest-posts__post-title {
    display: block;
    min-height: 85px;
    margin-top: 12px;
    font-weight: bold;
    font-size: 11pt;
    line-height: 1.4;
}

/* 6. NORMALE BEITRÄGE (Untereinander): Titel-Box kompakt an den Text anpassen */
.wp-block-latest-posts:not(.is-grid) .wp-block-latest-posts__post-title {
    display: block;
    min-height: 0 !important;
    margin-top: 5px !important;
    margin-bottom: 8px !important;
    font-weight: bold;
    font-size: 13pt;
    line-height: 1.3;
}

/* 7. EIFEL-FOKUS: Textfarbe der Titel in den Kacheln festlegen */
.wp-block-latest-posts__post-title a {
    color: #333333 !important;
}

/* 8. ABSTÄNDE REDUZIEREN: Leerraum um die Überschriften minimieren (Hauptseite) */
.home .wp-block-latest-posts__featured-image {
    margin-bottom: 5px !important;
}

.home .wp-block-latest-posts__post-excerpt {
    margin-top: 0 !important;
    padding-top: 0 !important;
    line-height: 1.5;
}

/* 9. BUTTON-ABSTAND: Auf Handys normal, am PC per Gummiband hochgezogen */
.home ul.wp-block-latest-posts.is-grid {
    margin-bottom: 5px !important;
}

/* Ab einer Bildschirmbreite von 768 Pixeln (Tablets & PCs) zieht der Code den Button hoch */
@media screen and (min-width: 768px) {
    .home .wp-block-buttons {
        margin-top: -35px !important;
        margin-bottom: 40px !important;
    }
}

/* Auf kleinen Handys (unter 768px) sorgt dieser Code für eine saubere Optik ohne Minus-Abstand */
@media screen and (max-width: 767px) {
    .home .wp-block-buttons {
        margin-top: 15px !important;
        margin-bottom: 30px !important;
    }
} 

/* EIFEL-FOKUS: Auf Smartphones (unter 768px) Bilder und Titel mittig ausrichten */
@media screen and (max-width: 767px) {
    .wp-block-latest-posts.wp-block-latest-posts__list.is-grid li {
        text-align: center !important;
    }
    .wp-block-latest-posts__featured-image {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .wp-block-latest-posts.is-grid .wp-block-latest-posts__post-title {
        text-align: center !important;
    }
}

/* SUPER-SMARTPHONE-FIX: Perfekte Optik bei Hochkant-Ansicht (Displays unter 480px) */
@media screen and (max-width: 480px) {
    
    /* 1. Kacheln (Eifel-Fokus & Co.) auf volle Breite zwingen, damit nichts quetscht */
    .wp-block-latest-posts.wp-block-latest-posts__list.is-grid li,
    .wp-block-latest-posts li {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    /* 2. Die Beitragsbilder zentrieren und den Text darunter zwingen */
    .wp-block-latest-posts__featured-image {
        display: block !important;
        float: none !important; /* Hebt eventuelles Links-Kleben auf */
        margin: 0 auto 10px auto !important; /* Zentriert das Bild und schafft 10px Platz nach unten */
        max-width: 100% !important;
    }

    .wp-block-latest-posts__featured-image img {
        margin: 0 auto !important;
    }

    /* 3. Die Ueberschriften sauber trennen, damit sie nicht ins Bild ragen */
    .wp-block-latest-posts.is-grid .wp-block-latest-posts__post-title,
    .wp-block-latest-posts__post-title {
        display: block !important;
        clear: both !important; /* Verhindert, dass Text in das Bild flascht */
        min-height: 0 !important; /* Hebt die starre Desktop-Hoehe auf dem Handy auf */
        margin-top: 10px !important;
        text-align: center !important;
    }
}

/* --- EINSPALTIGES LAYOUT ERZWINGEN (Zentriert) --- */
@media screen and (min-width: 48em) {
    /* Verhindert, dass der Titel links und der Inhalt rechts steht */
    .page-two-column .panel-content .wrap {
        max-width: 1000px; /* Oder deine gewuenschte Breite */
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Setzt die Inhaltsbreite auf die volle verfuegbare Flaeche */
    .page-two-column .panel-content .entry-content {
        width: 100% !important;
        float: none !important;
    }

    /* Setzt den Titelbereich ueber den Inhalt statt daneben */
    .page-two-column .panel-content .entry-header {
        width: 100% !important;
        float: none !important;
        margin-bottom: 20px;
        text-align: center; /* Zentriert die Ueberschriften */
    }
    
    /* Startseite und Blog-Layout auf volle Breite stellen */
    .has-sidebar:not(.error404) #primary,
    .page-template-page-html-templates-homepage-php #primary {
        width: 100% !important;
        float: none !important;
        max-width: 1000px;
        margin: 0 auto;
    }
}

/* --- LOGO & TITELBEREICH ZENTRIEREN --- */
.site-branding {
    text-align: center;
    padding: 3em 0;
}

/* --- 1. EIFELFOKUS: KACHELN & BILDER PERFEKT ZENTRIEREN --- */
.mein-kachel-grid ul.wp-block-latest-posts {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 0 !important;
}

.mein-kachel-grid ul.wp-block-latest-posts li {
    width: calc(33.33% - 20px) !important;
    min-width: 240px !important;
    max-width: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Zentriert Inhalt horizontal in der Kachel */
    text-align: center !important;
    margin-bottom: 30px !important;
}

/* Zwingt die Beitragsbilder im Eifelfokus exakt in die Mitte */
.mein-kachel-grid .wp-block-latest-posts__featured-image,
.mein-kachel-grid .wp-block-latest-posts__featured-image a,
.mein-kachel-grid .wp-block-latest-posts__featured-image img {
    float: none !important;
    margin: 0 auto 12px auto !important;
    display: block !important;
}

/* --- 2. ALLE ANDEREN BLÖCKE: LISTEN-MODUS & BUTTONS RECHTS --- */
.mein-listen-modus ul.wp-block-latest-posts {
    display: block !important;
    margin-bottom: 0 !important; /* Entfernt den Abstand der Liste selbst nach unten */
    padding-bottom: 0 !important; /* Entfernt inneren Abstand der Liste nach unten */
}

.mein-listen-modus ul.wp-block-latest-posts li {
    display: block !important;
    width: 100% !important;
    /* Verringert den Abstand nach dem LETZTEN Beitrag in der Liste, 
       behält aber Abstand zwischen den Beiträgen bei */
    margin-bottom: 25px !important; 
    clear: both !important; 
}

/* Sorgt dafuer, dass der absolut letzte Beitrag in der Liste gar keinen Abstand mehr erzwingt */
.mein-listen-modus ul.wp-block-latest-posts li:last-child {
    margin-bottom: 0 !important;
}

/* Bild linksbündig in den Listen */
.mein-listen-modus .wp-block-latest-posts__featured-image {
    float: left !important;
    margin-right: 25px !important;
    margin-bottom: 10px !important; /* Leicht verringert, damit es kompakter wirkt */
}

/* Zwingt den Text und Button neben das Bild */
.mein-listen-modus .wp-block-latest-posts__post-excerpt {
    display: block !important;
    overflow: hidden !important; 
}

/* "Weiterlesen"-Button rechtsbündig mit minimalem Abstand nach unten */
.mein-listen-modus ul.wp-block-latest-posts a.wp-block-latest-posts__post-read-more {
    display: block !important;
    text-align: right !important; 
    margin-top: 10px !important;
    margin-bottom: 5px !important; /* Verhindert, dass der Button am Rahmen klebt, nimmt aber die Luft raus */
}

/* --- 3. WERBEPARTNERSCHAFT RETTEN --- */
.sponsored-label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
}


/* --- 4. WERKSTATT-SPECIALS: GROSSES HAUPTBILD ZENTRIEREN --- */

/* Zentriert Standard-Bild-Bloecke auf der Startseite */
.home .wp-block-image, 
.home .wp-block-image figure {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

.home .wp-block-image img {
    margin: 0 auto !important;
    display: inline-block !important;
    float: none !important;
}

/* --- COMPACT-MODUS FÜR DIE INNEREN WORDPRESS-CONTAINER --- */

/* Wir schnappen uns genau die von dir gefundene Klasse, aber NUR wenn unsere Liste drinsteckt */
.mein-listen-modus .wp-block-group__inner-container.is-layout-flow,
.mein-listen-modus.wp-block-group__inner-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* WordPress nutzt im Flow-Layout oft "margin-block-end" fuer den letzten Punkt. Das setzen wir auf Null! */
.mein-listen-modus .wp-block-group__inner-container.is-layout-flow > *:last-child,
.mein-listen-modus ul.wp-block-latest-posts > *:last-child {
    margin-bottom: 0 !important;
    margin-block-end: 0 !important; /* Das ist der neuere WordPress-Befehl fuer Abstaende */
}

/* Falls die Gruppe um die Liste herum liegt und nicht im selben Element sitzt */
.wp-block-group:has(.mein-listen-modus) .wp-block-group__inner-container {
    padding-bottom: 5px !important;
    margin-bottom: 0 !important;
}

/* --- EXTRA-ABSTÄNDE FÜR DIE LISTEN-PANELS AUF DEM PC STRAFFEN --- */

/* Dieser Befehl gilt NUR für Bildschirme ab 768 Pixel Breite (Tablets und PCs). 
   Smartphones ignorieren das komplett und bleiben absolut sicher! */
@media screen and (min-width: 48em) {
    
    /* Wenn in einem Startseiten-Panel unsere Liste drinsteckt... */
    .site-panel:has(.mein-listen-modus) .panel-content,
    .site-panel:has(.mein-listen-modus) .panel-content .wrap {
        padding-bottom: 15px !important; /* Schrumpft den riesigen Theme-Abstand unten zusammen */
    }
    
    /* Falls dein Theme die Klasse etwas anders verschachtelt hat, sichern wir das hier ab */
    .panel-content:has(.mein-listen-modus) {
        padding-bottom: 15px !important;
    }
    
}

/* --- MUSIKVIDEOS: SYNC NUR FÜR PCS (SMARTPHONES BLEIBEN UNBERÜHRT) --- */

/* Diese Schranke sorgt dafuer, dass Handys den Code komplett ignorieren! 
   Erst ab Tablet-/PC-Groesse (48em) schaltet sich das CSS ein. */
@media screen and (min-width: 48em) {

    /* Tabelle zentrieren und im Zaum halten */
    .home table.video-bilder-reihe {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 auto 15px auto !important;
        display: table !important;
    }

    .home table.video-bilder-reihe td {
        width: 220px !important;
        text-align: center !important;
        border: none !important;
        padding: 0 10px !important;
    }

    /* RSS-Feed exakt an die Tabellenbreite anpassen */
    .home ul.video-text-reihe {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 auto !important;
        max-width: 660px !important;
        width: 100% !important;
    }

    /* Jedes Text-Element wird auf PC-Bildschirmen so schmal wie das Bild */
    .home ul.video-text-reihe li {
        flex: 0 0 220px !important;
        width: 220px !important;
        max-width: 220px !important;
        padding: 0 10px !important;
        margin-bottom: 0 !important;
        text-align: justify !important;
        word-break: break-word !important;
    }

}