/*
Theme Name: rano design 2
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Tags: translation-ready,accessibility-ready,two-columns,right-sidebar,left-sidebar,footer-widgets,blog,custom-logo,custom-background,custom-menu,rtl-language-support,editor-style,threaded-comments,custom-colors,featured-images,wide-blocks,full-width-template,theme-options,e-commerce
Version: 1.4.4.1770984222
Updated: 2026-02-13 13:03:42

*/

/* 1. TYPOGRAFIE GLOBAL */
h1, h2, h3 { font-weight: 200 !important; }
body { font-weight: 300 !important; }

/* 1. NUR CHROME & SAFARI (Webkit) */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .archive .entry-title, .category .entry-title {
        font-size: 1.28rem !important; 
        font-weight: 400 !important;
        letter-spacing: 0.02em !important;
        -webkit-font-smoothing: antialiased !important;
    }
}

/* --- ANIMATION --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.archive .entry, .category .entry {
    opacity: 0; 
    animation: fadeInUp 0.9s ease-out forwards;
}

/* 2. GRID & SPALTEN (Fix für iPad & Desktop) */
.grid-cols, 
.archive .site-main .entries, 
.category .site-main .entries {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)); /* Handy Fallback */
  column-gap: 0 !important;
  row-gap: 0 !important;
  gap: 0 !important;
}

/* iPad Querformat: 4 Spalten */
@media (min-width: 768px) and (max-width: 1365px) {
    .grid-cols, .archive .site-main .entries, .category .site-main .entries { 
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important; 
    }
}

/* iPad Hochformat: 3 Spalten */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .grid-cols, .archive .site-main .entries, .category .site-main .entries { 
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important; 
    }
}

/* Desktop: 6 Spalten */
@media screen and (min-width: 1366px) {
  .grid-lg-col-4, .archive .site-main .entries, .category .site-main .entries { 
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important; 
  }
}

/* 3. KACHEL-BASIS */
.archive .entry, .category .entry {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 1 / 1 !important;
    min-height: 250px;
}

.archive .post-thumbnail img, .category .post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease !important;
}

.archive .entry:hover .post-thumbnail img { transform: scale(1.1); }

/* 4. BALKEN & TITEL */
.archive .entry-content-wrap, .category .entry-content-wrap {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10;
    min-height: 20% !important; 
    background: rgba(255, 255, 255, 0.85) !important; 
    display: flex !important;
    align-items: flex-end !important; 
    padding: 10px 15px 5px 15px !important; 
    opacity: 0;
    transition: opacity 0.4s ease !important;
    pointer-events: none;
}

.archive .entry-title a, .category .entry-title a {
    font-family: "Archivo Narrow", sans-serif !important; 
    font-size: 1.1rem !important; 
    font-weight: 300 !important;
    color: transparent !important;
    text-decoration: none !important;
    display: block !important;
    transform: translateY(10px) !important;
    transition: transform 0.4s ease-out, color 0.1s ease !important;
}

/* Firefox Titel-Größe */
@-moz-document url-prefix() {
    .archive .entry-title a { font-size: 0.9rem !important; font-stretch: condensed !important; }
}

.archive .entry:hover .entry-content-wrap { opacity: 1 !important; }
.archive .entry:hover .entry-title a { color: #333333 !important; transform: translateY(0) !important; }

/* 5. MOBILE OPTIMIERUNG (120px flach) */
@media screen and (max-width: 767px) {
    body.archive .site-main .entries, body.category .site-main .entries {
        grid-template-columns: 1fr 1fr !important;
        gap: 0 !important;
    }
    body.archive .entry, body.category .entry {
        aspect-ratio: auto !important; 
        height: 120px !important;
        min-height: 60px !important;
    }
    body.archive .entry-content-wrap, body.category .entry-content-wrap {
        opacity: 1 !important;
        background: rgba(235, 232, 228, 0.95) !important;
        width: 85% !important;
        height: 45px !important;
        align-items: center !important;
        transform: none !important;
    }
    body.archive .entry-title a, body.category .entry-title a {
        color: #333333 !important;
        font-size: 1.0rem !important;
        transform: none !important;
    }
}

/* 6. FIREFOX BLITZER FIX */
@-moz-document url-prefix() {
    .archive .entry, .category .entry { margin-right: -0.5px !important; max-width: calc(100% + 0.5px); }
    .archive .site-main .entries { padding-right: 0.5px; }
}

/* 7. CLEANUP & MENÜ */
.archive .entry-footer, .archive .entry-meta, .archive .entry-summary { display: none !important; }
.site-bottom-header-wrap { display: none !important; }
.page-id-2513 .site-bottom-header-wrap, .page-id-2721 .site-bottom-header-wrap, 
.page-id-2719 .site-bottom-header-wrap, .page-id-2717 .site-bottom-header-wrap,
.page-id-2714 .site-bottom-header-wrap, .page-id-2711 .site-bottom-header-wrap,
.category-projekte .site-bottom-header-wrap, .category-naturstein .site-bottom-header-wrap,
.category-ziegelmauerwerk .site-bottom-header-wrap, .category-kunststein-terrazzo-beton .site-bottom-header-wrap,
.category-farbfassung-anstriche .site-bottom-header-wrap, .category-putz-und-stuck .site-bottom-header-wrap {
    display: block !important;
}

.secondary-navigation .menu-item:not(:last-child)::after {
    content: "|"; position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: #999;
}
.secondary-navigation .secondary-menu-container > ul li.menu-item > a {
    font-family: "Archivo Narrow", sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

.meine-datenschutz-box { width: 100% !important; max-width: 1340px !important; margin: 0 auto !important; }
.uagb-block-bf023382 .spectra-image-gallery__layout--grid { grid-gap: 2px !important; }


/* ==========================================================================
   MOBILE OPTIMIERUNG (KOMBINIERT: 1 Spalte flach / 2 Spalten Quadrat)
   ========================================================================== */

/* A. FÜR MITTLERE HANDYS & QUERFORMAT (451px bis 767px) -> 2 SPALTEN QUADRAT */
@media screen and (min-width: 451px) and (max-width: 767px) {
    body.archive .site-main .entries, 
    body.category .site-main .entries {
        grid-template-columns: 1fr 1fr !important;
        gap: 2px !important;
    }
    body.archive .entry, body.category .entry {
        aspect-ratio: 1 / 1 !important; /* Wieder quadratisch */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    body.archive .entry-content-wrap {
        opacity: 1 !important;
        background: rgba(235, 232, 228, 0.95) !important;
    }
}

/* ==========================================================================
    NUR SMARTPHONES: 1 Spalte flach (Hoch) / 2 Spalten Quadrat (Quer)
   ========================================================================== */

/* A. NUR SMARTPHONES IM QUERFORMAT (451px bis 760px) -> 2 Spalten */
@media screen and (min-width: 451px) and (max-width: 760px) {
    /* Wir sprechen die Liste extrem spezifisch an, um Kadence zu überstimmen */
    html body.archive .site-main .entries, 
    html body.category .site-main .entries,
    .entries {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* ZWEI SPALTEN ERZWINGEN */
        column-gap: 2px !important;
        row-gap: 2px !important;
    }

    /* Kachel-Verhalten im Querformat */
    html body .entry {
        aspect-ratio: 1 / 1 !important; 
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        display: block !important;
        width: 100% !important;
    }

    /* Balken-Verhalten im Querformat */
    html body .entry-content-wrap {
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
        background: rgba(235, 232, 228, 0.95) !important;
        transform: none !important;
        position: absolute !important;
        bottom: 0 !important;
        width: 100% !important;
    }
}

/* B. NUR SMARTPHONES IM HOCHFORMAT (bis 450px) -> 1 Spalte flach */
@media screen and (max-width: 450px) {
    body.archive .site-main .entries, 
    body.category .site-main .entries {
        grid-template-columns: 1fr !important; 
        gap: 4px !important;
        display: grid !important;
    }
    body.archive .entry, body.category .entry {
        height: 150px !important;      
        min-height: 150px !important;
        max-height: 150px !important;
        aspect-ratio: auto !important;
        width: 100% !important;
    }
    body.archive .post-thumbnail img, 
    body.category .post-thumbnail img {
        height: 150px !important;
        object-fit: cover !important;
    }
    body.archive .entry-content-wrap, 
    body.category .entry-content-wrap {
        opacity: 1 !important;
        visibility: visible !important;
        height: 60px !important;
        background: rgba(235, 232, 228, 0.95) !important;
        transform: none !important;
        display: flex !important;
    }
    body.archive .entry-title a {
        color: #333333 !important;
        font-size: 1.0rem !important;
        transform: none !important;
    }
}






/* ============================================================
   FINALE FOTO-GALERIE & LIGHTBOX OPTIMIERUNG
   ============================================================ */

/* 1. DAS RASTER (GRID) - 5 Spalten Desktop, 4 Tablet, 3 Mobile */
.wp-block-gallery, 
ul.wp-block-gallery {
    display: grid !important;
    gap: 2px !important; /* Exakter 2mm-Look */
    padding: 0 !important;
    margin: 0 auto 30px auto !important;
    list-style: none !important;
}

/* Responsive Spalten-Steuerung */
@media (min-width: 1025px) {
    .wp-block-gallery { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 1024px) and (min-width: 801px) {
    .wp-block-gallery { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 800px) {
    .wp-block-gallery { grid-template-columns: repeat(3, 1fr) !important; }
}

/* 2. BILD-CONTAINER & EFFEKTE */
.wp-block-gallery .wp-block-image,
.wp-block-gallery li {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important; /* Wichtig für Zoom-Effekt */
}

/* Schärfe-Optimierung speziell für Chromium-Browser (Chrome/Edge) */
.wp-block-gallery .wp-block-image img {
    image-rendering: -webkit-optimize-contrast !important; /* Erzwingt höheren Kontrast beim Skalieren */
    image-rendering: crisp-edges !important; /* Verhindert das "Matschig-Werden" an Kanten */
    transform: translateZ(0); /* Aktiviert die GPU-Beschleunigung für saubereres Rendering */
}

/* 1:1 Quadrat & No-Border Styling */
.wp-block-gallery .wp-block-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform 0.4s ease-in-out !important;
}

/* Hover-Zoom Effekt */
.wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.08);
}



/* 3. LIGHTBOX CLEANUP (Simple Lightbox Baseline Theme) */

/* Titel, Zähler und Beschreibungen komplett ausblenden */
#slb_viewer_wrap .slb_theme_slb_baseline .slb_details,
#slb_viewer_wrap .slb_theme_slb_baseline .slb_data {
    display: none !important;
    height: 0 !important;
}

/* Weiße Ränder und Schatten (Heiligenschein) entfernen */
#slb_viewer_wrap .slb_theme_slb_baseline .slb_content,
#slb_viewer_wrap .slb_theme_slb_baseline .slb_content_item,
#slb_viewer_wrap .slb_theme_slb_baseline .slb_container {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 4. CURSOR-FIX (Hand/Pointer im Firefox & Chrome) */
#slb_viewer_wrap .slb_theme_slb_baseline .slb_nav,
#slb_viewer_wrap .slb_theme_slb_baseline .slb_nav_next,
#slb_viewer_wrap .slb_theme_slb_baseline .slb_nav_prev,
#slb_viewer_wrap .slb_theme_slb_baseline .slb_close,
#slb_viewer_wrap .slb_theme_slb_baseline .slb_data_item img {
    cursor: pointer !important;
}


/*Projektbeiträge Projekt und Titel enger zusammen*/
/* Zieht die Texte innerhalb des speziellen Containers zusammen */

/* Wir bewegen die Headline physisch aus ihrer Grid-Position heraus nach oben */
h2.schieb-hoch {
    transform: translateY(-30px) !important;
    margin-bottom: -25px !important; /* Verhindert ein Loch unter der Headline */
}

/* Den Absatz darüber (Projekt) "flach" machen */
.projekt-titel-container p {
    margin-bottom: 0 !important;
    line-height: 1.0 !important;
}





/* Erhöhter Breakpoint für alle Smartphones, aber Fokus auf geringe Höhe */
@media screen and (max-height: 420px) and (max-width: 920px) {
    
    /* 1. Radikale Höhen-Freigabe für Kadence & GenerateBlocks */
    html, body, #page, #content, .site-content {
        height: auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        position: relative !important;
    }

    /* 2. Den "Flex-Zentrierungs-Killer" für SE-Modelle */
    .gb-container, 
    .gb-grid-wrapper,
    .kt-row-column-wrap, 
    .wp-block-kadence-rowlayout,
    .entry-content {
        display: block !important; /* Zwingt alles untereinander statt zentriert */
        min-height: 0 !important;
        height: auto !important;
    }

    /* 3. Padding-Reduzierung (Auf dem SE zählt jeder Pixel!) */
    .gb-container {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* 4. Verhindern, dass der Header das Scrollen blockiert */
    .site-header, #masthead, .main-navigation {
        position: relative !important; 
        transform: none !important;
    }

    /* 5. Speziell für den Fall, dass man nicht "hoch" kommt */
    #primary {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ############################################################
   ENDE DER BESTEHENDEN CODES - AB HIER NEUE ÄNDERUNGEN
   ############################################################ */