@charset "UTF-8";
/* ed - Hanshand Schrift */

/* Font-Definition für alle Geräte - optimiert für mobile Kompatibilität */
@font-face {
    font-family: 'hanshand_italic';
    /* Mobile-first: woff2 und woff zuerst (beste mobile Unterstützung) */
    src: url('ed/ed-hanshand/hanshand-webfont.woff2') format('woff2'),
         url('ed/ed-hanshand/hanshand-webfont.woff') format('woff'),
         url('ed/ed-hanshand/hanshand-webfont.ttf') format('truetype'),
         url('ed/ed-hanshand/hanshand-webfont.eot?#iefix') format('embedded-opentype'),
         url('ed/ed-hanshand/hanshand-webfont.svg#hanshand_italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap; /* Wichtig für mobile Geräte */
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F, U+0180-024F;
}

/* Desktop Styling */
.ed-hanshand-schrift {
    font-family: 'hanshand_italic', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive, sans-serif;
    margin-bottom: 0.5rem;
    margin-top: 0;
    font-size: 16px;
    line-height: 1.4;
}

/* Mobile Styling - separate Regeln für bessere Font-Ladung */
@media (max-width: 768px) {
    .ed-hanshand-schrift {
        font-family: 'hanshand_italic', 'Brush Script MT', 'Lucida Handwriting', 'Comic Sans MS', cursive, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        /* Mobile-spezifische Optimierungen */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        /* Erzwinge Font-Ladung auf mobilen Geräten */
        font-feature-settings: normal;
    }
}

/* 
 * ED-Schatten-Bilder
 * CSS-Klasse für Bilder und Videos mit Hover-Effekt und Schatten
 * 
 * Diese Klasse fügt Bildern und Videos einen Schatten und einen Hover-Effekt hinzu.
 * Beim Überfahren mit der Maus wird das Element leicht vergrößert und der Schatten verstärkt.
 * Vollständig responsive und mobile-optimiert.
 */

/* Basis-Styling für den Link-Container und Cards */
.ed-schatten-bilder {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    /* Sicherstellen, dass auf mobilen Geräten keine Layout-Probleme entstehen */
    max-width: 100%;
    box-sizing: border-box;
    /* Schatten auch auf den Link-Container anwenden */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
}

/* Für d-block Links (wie auf home.php) */
.ed-schatten-bilder.d-block {
    display: block !important;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
}

/* Für Cards (z.B. Video-Container) */
.ed-schatten-bilder.card {
    display: block;
    max-width: 100%;
}

/* Hover-Effekt: Leichte Vergrößerung des Links/Cards */
/* Nur auf Geräten mit Maus (Desktop/Tablet mit Maus) */
@media (hover: hover) and (pointer: fine) {
    .ed-schatten-bilder:hover {
        transform: scale(1.05);
        /* Verstärkter Schatten beim Hover auf den Link-Container */
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Hover-Effekt: Verstärkter Schatten beim Überfahren mit der Maus (für Bilder) */
    .ed-schatten-bilder:hover img {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
        transition: box-shadow 0.3s ease;
    }
    
    /* Hover-Effekt: Verstärkter Schatten für Cards (z.B. Videos) */
    .ed-schatten-bilder.card:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Aktiver Zustand (beim Klicken): Schatten bleibt verstärkt */
    .ed-schatten-bilder:active,
    .ed-schatten-bilder:focus {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
    }
    
    .ed-schatten-bilder:active img,
    .ed-schatten-bilder:focus img {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
    }
}

/* Touch-Geräte: Aktiver Zustand beim Tap (leichtes Scale-Down für Feedback) */
@media (hover: none) and (pointer: coarse) {
    .ed-schatten-bilder:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
}

/* Basis-Styling für die Bilder */
.ed-schatten-bilder img {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    border: 1px solid #ffffff !important;
    /* Standard-Schatten (ähnlich Bootstrap shadow-sm) - verstärkt für bessere Sichtbarkeit */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15) !important;
    /* Responsive Bildgröße */
    max-width: 100%;
    height: auto;
    /* Sicherstellen, dass der Schatten sichtbar ist */
    display: block;
}

/* Schatten für gallery-thumbnail Divs (wenn sie in ed-schatten-bilder Links sind) */
.ed-schatten-bilder .gallery-thumbnail {
    /* Overflow visible, damit Schatten sichtbar bleibt */
    overflow: visible !important;
    /* Schatten auf das Div anwenden statt auf das Bild */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.3s ease;
}

/* Das Bild innerhalb des gallery-thumbnail sollte overflow: hidden haben für object-fit */
.ed-schatten-bilder .gallery-thumbnail img {
    /* Overflow hidden für object-fit, aber Schatten wird vom Parent-Div getragen */
    overflow: hidden;
    box-shadow: none;
}

/* Hover: Schatten auf gallery-thumbnail verstärken */
@media (hover: hover) and (pointer: fine) {
    .ed-schatten-bilder:hover .gallery-thumbnail {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    }
}

/* Basis-Styling für Cards (z.B. Video-Container) */
.ed-schatten-bilder.card {
    /* Standard-Schatten (ähnlich Bootstrap shadow-sm) */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Responsive Anpassungen für mobile Geräte */
@media (max-width: 768px) {
    .ed-schatten-bilder {
        display: block;
        width: 100%;
    }
    
    .ed-schatten-bilder img {
        width: 100%;
    }
}


/* Spezifische Tabellenfarben */
.eigenschaften-natursteine-page .table {
    border: 1px solid #ffffff !important;
}
.eigenschaften-natursteine-page .table th,
.eigenschaften-natursteine-page .table td {
    border: 1px solid #ffffff !important;
}
.eigenschaften-natursteine-page .table tbody tr:nth-child(odd) {
    background-color: #CBD5C8 !important;
}
.eigenschaften-natursteine-page .table tbody tr:nth-child(even) {
    background-color: #D3E4CC !important;
}