/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ######################### */
/* Hozizontales Scrollen für */
/* mobile ansicht entfernen  */
/* ######################### */
html, body{
	width: 100%;
	overflow-x: hidden;
}


/* ############# */
/* Sticky-Header */
/* ############# */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999; 
}

.site-content {
    margin-top: var(--header-height, 90px);
}



/* ################### */
/* Header-Kontaktliste */
/* ################### */
.header-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* horizontal nebeneinander */
  gap: 25px;
  align-items: center;
}

.header-contact-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.header-contact-list i {
  font-size: 16px;
  color: #2C8CC6;
}



/* ###################################### */
/* Trenner im Pimären und Sekundären Menu */
/* ###################################### */
.main-header-menu > .menu-item:not(:last-child)::after,
.ast-secondary-header .ast-header-sections-navigation > .menu-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;                 /* Dicke */
  height: 1em;                /* Höhe: Textzeile */
  background-color: #ccc;     /* Farbe */
}
/* Basis-Setup für die Menü-Items */
.main-header-menu > .menu-item,
.ast-secondary-header .ast-header-sections-navigation > .menu-item {
  position: relative;
  padding: 0px;
}




/* ############## */
/* Sub-menu Style */
/* ############## */
.main-header-menu .sub-menu {
    background-color: #ffffff !important;  
}
.main-header-menu .sub-menu a {
    /*color: #ffffff !important;*/  
}
.main-header-menu .sub-menu a:hover {
    background-color: #F0F5FA; 
    /*color: #ffffff !important;*/
}


/* ############# */
/* Footer-Widget */
/* ############# */
footer .footer-widget-area .widget {
    flex: 0 1 auto; /* flexible Breite */
    text-align: center; /* Text in der Mitte */
}
.footer-contact-list li {
  display: auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.footer-contact-list li i {
  font-size: 18px;
  color: #2C8CC6; 
}


/* ############# */
/*    CAD-CAM    */
/* ############# */
.cad-cam-head-slider{
	min-height: 600px;
}

/* Mobile Ansicht */
@media (max-width: 992px) {
    .cad-cam-head-slider{
		min-height: 350px; !important
	}
}

@media (max-width: 480px) {
    .cad-cam-head-slider{
		min-height: 225px; !important
	}
}


/* ===============================================
   Fallbeispiel-Single-Seite - CPT "fallbeispiel"
   Typografie + Layout + Button
================================================ */

/* Typografie */
.fallbeispiel-entry,
.fallbeispiel-entry p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 1.22em;
}
.fallbeispiel-entry h2 { font-size:36px; font-family:inherit; margin-bottom:0.5em; }
.fallbeispiel-entry h3 { font-size:24px; font-family:inherit; margin-bottom:0.5em; }
.fallbeispiel-entry h4 { font-size:20px; font-family:inherit; margin-bottom:0.5em; }

.fallbeispiel-entry h5 { 
	font-size: 16px; 
	font-family: inherit; 
	margin-bottom: 0.5em; 
	color: #2C8CC6;
	padding-bottom: 2px;  
    border-bottom: 2px solid #2C8CC6; 
	display: inline-block; 
}

/* Vorher/Nachher Bilder */
.vorher-nachher-wrapper {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}
.vorher-nachher-wrapper > div {
    flex: 1 1 45%;
    text-align: center;
}
.vorher-nachher-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Navigation links/rechtsbündig */
.fallbeispiel-navigation {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Titel darunter */
	border-top: 1px solid #e1e8ed; /* 1px Trenner oben */
    margin-top: 3rem;
	padding-top: 2rem;
}

/* Mittlerer Trenner */
.fallbeispiel-navigation .nav-divider {
    width: 1px;
    background-color: #e1e8ed;
    height: 30px;  /* Höhe des Trenner relativ zur Navigation */
	align-self: flex-end; 
    margin: 0 1rem; /* Abstand zu den Links */
}

.prev-fallbeispiel { 
    text-align: left; /* Linksbündig */
}
.next-fallbeispiel { 
    text-align: right; /* Rechtsbündig */
}

/* Link-Block */
.fallbeispiel-navigation .nav-link {
    display: flex;
    flex-direction: column; /* Titel darunter */
    align-items: flex-start; /* Standard linksbündig */
    font-weight: 600;
    color: #334155;
    text-decoration: none;
}
.next-fallbeispiel .nav-link {
    align-items: flex-end; /* Rechtsbündig für rechte Seite */
}
.fallbeispiel-navigation .nav-link:hover {
    color: #DE4E3F;
}

/* Pfeil + Text nebeneinander */
.fallbeispiel-navigation .nav-row {
    display: flex;
    align-items: center;
}

/* Pfeil */
.fallbeispiel-navigation .arrow-svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    margin-right: 0.3rem; /* Abstand Pfeil/Text für links */
}

/* Rechts-Navigation: Pfeil nach Text */
.next-fallbeispiel .nav-row {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* rechtsbündig */
}

.next-fallbeispiel .arrow-svg {
    margin-left: 0.3rem; /* Abstand Pfeil/Text */
    margin-right: 0;     /* kein rechter Abstand */
}

/* Text neben Pfeil */
.fallbeispiel-navigation .nav-text {
    font-size: 0.9rem;
}

/* Titel unter Pfeil+Text */
.fallbeispiel-navigation .nav-title {
    font-weight:500;
    font-size:1rem;
    margin-top:0.2rem;
    text-align: inherit; /* folgt align-items */
}

.fallbeispiel-vorher-nachher .vorher-nachher-wrapper {
    display: flex;
    gap: 1rem; /* Abstand zwischen den Bildern */
}

.fallbeispiel-vorher-nachher .vorher,
.fallbeispiel-vorher-nachher .nachher {
    flex: 1; /* gleichmäßig nebeneinander */
}

/* Prozessbilder-Galerie Layout */
.prozessbilder-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* flexible Spalten */
    gap: 1rem; /* Abstand zwischen den Bildern */
	margin-top: 1em;
}

/* Bilder gleichmäßig einpassen */
.prozessbilder-content img {
    width: 100%;
    height: 220px;             /* feste Höhe für alle Bilder */
    object-fit: cover;         /* Bild wird beschnitten, bleibt aber proportional */
    border-radius: 8px;
    display: block;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
}



/* Mobile Ansicht */
@media (max-width: 768px) {
    .fallbeispiel-navigation { flex-direction: column;  }
    .prev-fallbeispiel { margin-bottom:1rem; text-align: left; } 
	.next-fallbeispiel { margin-bottom:1rem; text-align: right; }
	.fallbeispiel-vorher-nachher .vorher-nachher-wrapper {
        flex-direction: column; /* untereinander */
    }
}

/* Mobile Geräte: Links und Rechts weiterhin an den Seiten */
@media (max-width: 480px) {
	.fallbeispiel-navigation {
        flex-direction: row;           /* Zeilenrichtung beibehalten */
        justify-content: space-between; /* links/rechts ausrichten */
        align-items: flex-end;          /* Trenner am unteren Rand */
    }

    .fallbeispiel-navigation .prev-fallbeispiel,
    .fallbeispiel-navigation .next-fallbeispiel {
        text-align: left;               /* links ausgerichtet */
        flex: 0 0 auto;                 /* verhindert, dass sie sich stapeln */
    }

    .fallbeispiel-navigation .next-fallbeispiel {
        text-align: right;              /* rechts ausgerichtet */
    }

    .fallbeispiel-navigation .nav-divider {
        height: 30px;                   /* ggf. etwas kürzer auf Handy */
    }
	
	.fallbeispiel-vorher-nachher .vorher,
    .fallbeispiel-vorher-nachher .nachher {
        width: 100%; /* volle Breite */
    }
}




/* ===============================================
   Fallbeispiel-Archivseite - CPT "fallbeispiel"
   Typografie + Layout + Button
================================================ */

/* Gesamtbereich Archivseite */
.post-type-archive-fallbeispiel {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.22;
	/* background-color: #eee;  komplette Seite weiß */ 
    padding: 2rem 0;
}

/* Überschriften H1–H6 nach Theme-Vorgaben */
.post-type-archive-fallbeispiel h1 {
    font-size: 2em;
    font-weight: 600;
    font-family: inherit;
	
}

.post-type-archive-fallbeispiel h2 {
    font-size: 30px;
    font-weight: inherit;
    font-family: inherit;
}

.post-type-archive-fallbeispiel h3 {
    font-size: 24px;
    font-weight: inherit;
    font-family: inherit;
}

.post-type-archive-fallbeispiel h4 {
    font-size: 20px;
    font-weight: inherit;
    font-family: inherit;
}

.post-type-archive-fallbeispiel h5 {
    font-size: 18px;
    font-weight: inherit;
    font-family: inherit;
}

.post-type-archive-fallbeispiel h6 {
    font-size: 16px;
    font-weight: inherit;
    font-family: inherit;
}

/* Artikel-Titel */
.post-type-archive-fallbeispiel .fallbeispiel-title {
    font-size: 24px;
    font-weight: 600;
    font-family: inherit;
    margin-bottom: 0.5rem;
	color: #334155;
}

.ast-separate-container .ast-blog-layout-4-grid .ast-article-post {
  padding: 2em;
  border: 0px solid #666;
}

/* Artikel-Titel */
.post-type-archive-fallbeispiel .fallbeispiel-title a{
   color: #334155;
}

.post-type-archive-fallbeispiel .page-header {
    margin-top: 0 !important;
    margin-bottom: 1.5rem; /* Abstand zu den ersten Fallzeilen */
}

.post-type-archive-fallbeispiel .fallbeispiel-row {
    width: 100%;
    max-width: none;
    margin: 0;
	padding 5em 0;
	border: 1px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 6px 15px -2px rgba(16,24,40,0.2); /* box-shadow: 0px 6px 15px -2px rgba(16,24,40,0.05); */
    box-sizing: border-box; /* Padding wirkt zuverlässig */
}


/* Meta-Daten unter dem Titel */
.post-type-archive-fallbeispiel .fallbeispiel-meta .stand {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.75rem;
}

/* Absätze im Inhalt */
.post-type-archive-fallbeispiel p {
    margin-top: 1.22em;
}

/* „Mehr“-Button */
.post-type-archive-fallbeispiel .fallbeispiel-mehr-link {
    display: inline-block;
    padding: 0.75rem 1.25rem;
    /* border: 1px solid #DE4E3F; */
    border-radius: 4px;
    font-size: 0.95rem;
    font-weight: 500;
	background-color: #2C8CC6; /* #2C8CC6 */
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
}

.post-type-archive-fallbeispiel .fallbeispiel-mehr-link:hover {
    background-color: #DE4E3F;
    color: #fff;
}

/* Liste der Fallzeilen */
.post-type-archive-fallbeispiel .fallbeispiel-list {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* Abstand zwischen den Zeilen */
}

/* Optional: Responsive */
@media (max-width: 768px) {
    .post-type-archive-fallbeispiel .fallbeispiel-row {
        padding: 1.5rem;
    }
}




/* ================================
   Fallbeispiel-Archivseite - Cover  
   mit Schrift-FADE-UP"
=================================*/
.fallbeispiel-archiv-cover {
    position: relative;
    margin-bottom: 2rem;
    overflow: hidden;
    border-radius: 8px;
    min-height: 350px;            /* Mindesthöhe Desktop */
    background-size: cover;        /* Bild füllt Container */
    background-position: center; 
    background-repeat: no-repeat;
}

.fallbeispiel-archiv-cover .cover-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;                     /* Start unten */
    color: #fff;
    font-weight: bold;
    opacity: 0;
    animation: fadeMoveUp .5s ease-out forwards;
    text-align: center;
    width: 90%;                    /* Textblock flexibel */
    font-size: clamp(16px, 4vw, 24px); /* responsive Schriftgröße */
}

.fallbeispiel-archiv-cover .cover-text h2 {
    display: inline-block;         /* Background passt sich an Text an */
    background: rgba(0,0,0,0.5);
    padding: 10px 20px;
    border-radius: 6px;
	color: #fff;
    word-wrap: break-word;         /* Text umbrechen, wenn nötig */
    text-align: center;
    margin: 0;
}

/* Animation: Text fährt von unten nach oben */
@keyframes fadeMoveUp {
    0% {
        opacity: 0;
        bottom: 0;                 /* Start unten */
    }
    100% {
        opacity: 1;
        bottom: 70%;               /* Endpunkt oben im Bild */
    }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .fallbeispiel-archiv-cover {
        min-height: 250px;
    }
    .fallbeispiel-archiv-cover .cover-text h2{
        font-size: clamp(14px, 5vw, 20px);
    }
    .fallbeispiel-archiv-cover .cover-text h2 {
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    .fallbeispiel-archiv-cover {
        min-height: 200px;
    }
    .fallbeispiel-archiv-cover .cover-text h2{
        font-size: clamp(12px, 6vw, 18px);
    }
    .fallbeispiel-archiv-cover .cover-text h2 {
        padding: 6px 12px;
    }
}

/* ==========================================
   Google Fonts + Font Awesome Icons lokal
===========================================*/



/* Alle Font Awesome Icons */
.fa-solid,
.fa-regular,
.fas,
.far,
.fab {
    font-size: 1.2em;     /* Größe aller Icons */
    color: #2C8CC6;        /* Icon-Farbe */
}