/* =========================================================
   BRAINFLUSH LABORATORY
   komplette user.css für die Startseite
   ========================================================= */


/* =========================================================
   ABSTAND VOR "WAS WIR MACHEN"
   ========================================================= */

h2.mt-5 {
    margin-top: 2rem !important;
}


/* =========================================================
   WAS WIR MACHEN – GROSSE KARTEN
   ========================================================= */

.brainflush-card {
    background: #ffffff;

    border: 1px solid #d8d8d8;
    border-top-width: 5px;
    border-top-style: solid;
    border-radius: 4px;

    min-height: 285px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Digitale Fertigung – ROT */
.brainflush-card.digital {
    border-top-color: #d62828;
}


/* Elektronik & Technik – GELB / ORANGE */
.brainflush-card.elektronik {
    border-top-color: #f2a900;
}


/* Werkstatt & Handwerk – GRÜN */
.brainflush-card.werkstatt {
    border-top-color: #159447;
}


/* Hover */
.brainflush-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   KARTENINHALT
   ========================================================= */

.brainflush-card .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 25px 24px 24px;

    text-align: center;
}


/* =========================================================
   ICON-CONTAINER
   ========================================================= */

.brainflush-icon {
    width: 90px;
    height: 90px;

    margin: 5px auto 16px;

    flex-shrink: 0;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* =========================================================
   DIGITALE FERTIGUNG
   roter 3D-Drucker + Zahnrad
   ========================================================= */

.brainflush-card.digital .brainflush-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23d62828' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='12' width='58' height='66' rx='3'/%3E%3Cline x1='18' y1='22' x2='64' y2='22'/%3E%3Cline x1='24' y1='67' x2='58' y2='67'/%3E%3Cline x1='28' y1='61' x2='54' y2='61'/%3E%3Cline x1='24' y1='29' x2='60' y2='29'/%3E%3Crect x='38' y='29' width='12' height='10'/%3E%3Cpath d='M41 39h6l-2 6h-2z'/%3E%3Cline x1='44' y1='45' x2='44' y2='51'/%3E%3Cpath d='M35 61v-7l4-3h10l4 3v7'/%3E%3Ccircle cx='72' cy='70' r='15'/%3E%3Ccircle cx='72' cy='70' r='6'/%3E%3Cline x1='72' y1='50' x2='72' y2='55'/%3E%3Cline x1='72' y1='85' x2='72' y2='90'/%3E%3Cline x1='52' y1='70' x2='57' y2='70'/%3E%3Cline x1='87' y1='70' x2='92' y2='70'/%3E%3Cline x1='58' y1='56' x2='62' y2='60'/%3E%3Cline x1='82' y1='80' x2='86' y2='84'/%3E%3Cline x1='58' y1='84' x2='62' y2='80'/%3E%3Cline x1='82' y1='60' x2='86' y2='56'/%3E%3C/svg%3E");
}


/* =========================================================
   ELEKTRONIK & TECHNIK
   gelb/oranger Mikrochip
   ========================================================= */

.brainflush-card.elektronik .brainflush-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f2a900' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='28' y='28' width='44' height='44' rx='4'/%3E%3Crect x='39' y='39' width='22' height='22' rx='2'/%3E%3Cline x1='36' y1='17' x2='36' y2='28'/%3E%3Cline x1='45' y1='17' x2='45' y2='28'/%3E%3Cline x1='55' y1='17' x2='55' y2='28'/%3E%3Cline x1='64' y1='17' x2='64' y2='28'/%3E%3Cline x1='36' y1='72' x2='36' y2='83'/%3E%3Cline x1='45' y1='72' x2='45' y2='83'/%3E%3Cline x1='55' y1='72' x2='55' y2='83'/%3E%3Cline x1='64' y1='72' x2='64' y2='83'/%3E%3Cline x1='17' y1='36' x2='28' y2='36'/%3E%3Cline x1='17' y1='45' x2='28' y2='45'/%3E%3Cline x1='17' y1='55' x2='28' y2='55'/%3E%3Cline x1='17' y1='64' x2='28' y2='64'/%3E%3Cline x1='72' y1='36' x2='83' y2='36'/%3E%3Cline x1='72' y1='45' x2='83' y2='45'/%3E%3Cline x1='72' y1='55' x2='83' y2='55'/%3E%3Cline x1='72' y1='64' x2='83' y2='64'/%3E%3C/svg%3E");
}


/* =========================================================
   WERKSTATT & HANDWERK
   grüner Schraubenschlüssel
   ========================================================= */

.brainflush-card.werkstatt .brainflush-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23159447' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M67 17c-9-3-19 0-24 8-4 6-4 13-1 19L20 66c-4 4-4 11 0 15s11 4 15 0l22-22c6 3 13 3 19-1 8-5 11-15 8-24L72 46l-11-3-3-11z'/%3E%3Ccircle cx='27' cy='74' r='4'/%3E%3C/svg%3E");
}


/* =========================================================
   ÜBERSCHRIFTEN UND TEXTE
   ========================================================= */

.brainflush-card h3 {
    margin-top: 0;
    margin-bottom: 8px;

    font-weight: 700;
    text-align: center;
}


.brainflush-card .card-text {
    margin-top: 0;
    margin-bottom: 0;

    line-height: 1.5;
    text-align: center;
}


/* =========================================================
   UNSER MAKERSPACE
   ========================================================= */

.makerspace-home {
    display: grid;

    grid-template-columns: 1.25fr 1fr;

    gap: 60px;

    align-items: center;

    margin-top: 65px;

    padding: 35px 50px;

    background: #f5f5f5;

    border-left: 5px solid #d62828;
}


/* Überschrift */
.makerspace-home h2 {
    margin-top: 0;
    margin-bottom: 18px;

    font-weight: 700;
}


/* Einleitung */
.makerspace-lead {
    font-size: 1.08rem;
    line-height: 1.6;
}


/* normaler Text */
.makerspace-home-text p {
    line-height: 1.6;
}


/* =========================================================
   MAKERSPACE-BUTTON
   ========================================================= */

.makerspace-button {
    display: inline-block;

    margin-top: 14px;

    padding: 10px 18px;

    background: #20252b;

    color: #ffffff !important;

    border-radius: 3px;

    font-weight: 600;

    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


.makerspace-button:hover {
    background: #d62828;

    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-2px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   VIER MAKERSPACE-KACHELN
   ========================================================= */

.makerspace-features {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    width: 100%;
}


/* anklickbare Kachel */
.makerspace-feature {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 75px;

    padding: 15px;

    background: #ffffff;

    border: 1px solid #dddddd;
    border-radius: 4px;

    font-weight: 600;

    text-align: center;

    color: #111111 !important;

    text-decoration: none !important;

    cursor: pointer;

    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}


/* Hover kleine Kacheln */
.makerspace-feature:hover {
    transform: translateY(-3px);

    background-color: #fafafa;

    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.13);

    color: #111111 !important;

    text-decoration: none !important;
}


/* Tastatur */
.makerspace-feature:focus-visible {
    outline: 2px solid #20252b;

    outline-offset: 3px;
}


/* =========================================================
   LABO-FARBEN DER MAKERSPACE-KACHELN
   ========================================================= */

/* 3D-Druck & CAD – ROT */
.makerspace-feature:nth-child(1) {
    border-left: 4px solid #d62828;
}


/* Elektronik – ORANGE */
.makerspace-feature:nth-child(2) {
    border-left: 4px solid #f2a900;
}


/* Computer & Technik – GELB */
.makerspace-feature:nth-child(3) {
    border-left: 4px solid #f2c500;
}


/* Werkzeuge & Maschinen – GRÜN */
.makerspace-feature:nth-child(4) {
    border-left: 4px solid #159447;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .makerspace-home {
        grid-template-columns: 1fr;

        gap: 30px;

        margin-top: 45px;

        padding: 30px 25px;
    }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767px) {

    .brainflush-card {
        min-height: auto;
    }


    .brainflush-card .card-body {
        padding: 22px 20px;
    }


    .brainflush-icon {
        width: 75px;
        height: 75px;

        margin: 3px auto 14px;
    }

}


@media (max-width: 600px) {

    .makerspace-features {
        grid-template-columns: 1fr;
    }


    .makerspace-home {
        padding: 25px 20px;
    }

}
/* =========================================================
   Brainflush Laboratory – Header-Logo
   ========================================================= */

/* Logo auf passende Desktop-Größe begrenzen */
.container-header .navbar-brand img,
.container-header .site-logo img {
    width: 850px;
    max-width: 100%;
    height: auto;
    display: block;
}

/* Header nicht unnötig hoch werden lassen */
.container-header .grid-child {
    padding-top: 0;
    padding-bottom: 0;
}

/* Tablet */
@media (max-width: 1000px) {
    .container-header .navbar-brand img,
    .container-header .site-logo img {
        width: 700px;
        max-width: 100%;
    }
}

/* Smartphone */
@media (max-width: 600px) {
    .container-header .navbar-brand img,
    .container-header .site-logo img {
        width: 100%;
        height: auto;
    }
}
/* =========================================================
   Header – etwas mehr Abstand unter der Navigation
   ========================================================= */

.container-header .container-nav {
    padding-bottom: 10px;
}
/* =========================================================
   MAKERSPACE-SEITE
   ========================================================= */


/* Einleitung
   --------------------------------------------------------- */

.makerspace-page .makerspace-intro {
    margin-bottom: 35px;
}

.makerspace-page .makerspace-intro h2 {
    margin-bottom: 12px;
}


/* Große Makerspace-Bereiche
   --------------------------------------------------------- */

.makerspace-page .makerspace-section {
    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-left: 5px solid;
    border-radius: 3px;

    margin-bottom: 28px;
    padding: 32px 38px;

    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.07);
}


/* Inhalt eines Bereiches */

.makerspace-page .makerspace-section-content {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 32px;
}


/* Symbol
   --------------------------------------------------------- */

.makerspace-page .makerspace-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100px;
    height: 100px;

    font-size: 50px;
    line-height: 1;
}


/* Text
   --------------------------------------------------------- */

.makerspace-page .makerspace-section-text h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.makerspace-page .makerspace-section-text p {
    margin-top: 0;
    margin-bottom: 10px;
}

.makerspace-page .makerspace-section-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   FARBEN
   ========================================================= */


/* 3D-Druck & CAD – ROT */

.makerspace-page .makerspace-red {
    border-left-color: #e52b2f;
}

.makerspace-page .makerspace-red .makerspace-section-icon {
    color: #e52b2f;
}


/* Elektronik – ORANGE */

.makerspace-page .makerspace-yellow {
    border-left-color: #f0a000;
}

.makerspace-page .makerspace-yellow .makerspace-section-icon {
    color: #f0a000;
}


/* Werkstatt – GRÜN */

.makerspace-page .makerspace-green {
    border-left-color: #0c9b4b;
}

.makerspace-page .makerspace-green .makerspace-section-icon {
    color: #0c9b4b;
}


/* =========================================================
   SPRUNGMARKEN
   Verhindert, dass die Überschrift beim Anspringen
   direkt am oberen Bildschirmrand klebt.
   ========================================================= */

.makerspace-page .makerspace-section {
    scroll-margin-top: 30px;
}


/* =========================================================
   HOVER
   ========================================================= */

.makerspace-page .makerspace-section {
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.makerspace-page .makerspace-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.11);
}


/* =========================================================
   TABLET / SMARTPHONE
   ========================================================= */

@media (max-width: 768px) {

    .makerspace-page .makerspace-section {
        padding: 25px 22px;
    }

    .makerspace-page .makerspace-section-content {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .makerspace-page .makerspace-section-icon {
        width: auto;
        height: auto;

        justify-content: flex-start;

        font-size: 42px;
        margin-bottom: 5px;
    }

}
/* =========================================================
   MAKERSPACE-SEITE – Linien-Icons
   ========================================================= */


/* gemeinsamer Icon-Bereich */
.makerspace-page .makerspace-section-icon {
    width: 82px;
    height: 82px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    flex-shrink: 0;
}


/* =========================================================
   3D-Druck & CAD – ROT
   ========================================================= */

.makerspace-page .makerspace-red {
    border-left-color: #d62828;
}

.makerspace-icon-print {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23d62828' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='12' y='12' width='58' height='66' rx='3'/%3E%3Cline x1='18' y1='22' x2='64' y2='22'/%3E%3Cline x1='24' y1='67' x2='58' y2='67'/%3E%3Cline x1='28' y1='61' x2='54' y2='61'/%3E%3Cline x1='24' y1='29' x2='60' y2='29'/%3E%3Crect x='38' y='29' width='12' height='10'/%3E%3Cpath d='M41 39h6l-2 6h-2z'/%3E%3Cline x1='44' y1='45' x2='44' y2='51'/%3E%3Cpath d='M35 61v-7l4-3h10l4 3v7'/%3E%3Ccircle cx='72' cy='70' r='15'/%3E%3Ccircle cx='72' cy='70' r='6'/%3E%3Cline x1='72' y1='50' x2='72' y2='55'/%3E%3Cline x1='72' y1='85' x2='72' y2='90'/%3E%3Cline x1='52' y1='70' x2='57' y2='70'/%3E%3Cline x1='87' y1='70' x2='92' y2='70'/%3E%3Cline x1='58' y1='56' x2='62' y2='60'/%3E%3Cline x1='82' y1='80' x2='86' y2='84'/%3E%3Cline x1='58' y1='84' x2='62' y2='80'/%3E%3Cline x1='82' y1='60' x2='86' y2='56'/%3E%3C/svg%3E");
}


/* =========================================================
   ELEKTRONIK – ORANGE
   ========================================================= */

.makerspace-page .makerspace-orange {
    border-left-color: #f2a900;
}

.makerspace-icon-chip {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f2a900' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='28' y='28' width='44' height='44' rx='4'/%3E%3Crect x='39' y='39' width='22' height='22' rx='2'/%3E%3Cline x1='36' y1='17' x2='36' y2='28'/%3E%3Cline x1='45' y1='17' x2='45' y2='28'/%3E%3Cline x1='55' y1='17' x2='55' y2='28'/%3E%3Cline x1='64' y1='17' x2='64' y2='28'/%3E%3Cline x1='36' y1='72' x2='36' y2='83'/%3E%3Cline x1='45' y1='72' x2='45' y2='83'/%3E%3Cline x1='55' y1='72' x2='55' y2='83'/%3E%3Cline x1='64' y1='72' x2='64' y2='83'/%3E%3Cline x1='17' y1='36' x2='28' y2='36'/%3E%3Cline x1='17' y1='45' x2='28' y2='45'/%3E%3Cline x1='17' y1='55' x2='28' y2='55'/%3E%3Cline x1='17' y1='64' x2='28' y2='64'/%3E%3Cline x1='72' y1='36' x2='83' y2='36'/%3E%3Cline x1='72' y1='45' x2='83' y2='45'/%3E%3Cline x1='72' y1='55' x2='83' y2='55'/%3E%3Cline x1='72' y1='64' x2='83' y2='64'/%3E%3C/svg%3E");
}


/* =========================================================
   COMPUTER & TECHNIK – GELB
   ========================================================= */

.makerspace-page .makerspace-yellow {
    border-left-color: #f2c500;
}

.makerspace-icon-computer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f2c500' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='18' width='68' height='48' rx='3'/%3E%3Crect x='24' y='26' width='52' height='32' rx='1'/%3E%3Cline x1='50' y1='66' x2='50' y2='78'/%3E%3Cline x1='36' y1='78' x2='64' y2='78'/%3E%3Cline x1='30' y1='84' x2='70' y2='84'/%3E%3C/svg%3E");
}


/* =========================================================
   WERKZEUGE & MASCHINEN – GRÜN
   ========================================================= */

.makerspace-page .makerspace-green {
    border-left-color: #159447;
}

.makerspace-icon-wrench {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23159447' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M67 17c-9-3-19 0-24 8-4 6-4 13-1 19L20 66c-4 4-4 11 0 15s11 4 15 0l22-22c6 3 13 3 19-1 8-5 11-15 8-24L72 46l-11-3-3-11z'/%3E%3Ccircle cx='27' cy='74' r='4'/%3E%3C/svg%3E");
}


/* =========================================================
   Mobil
   ========================================================= */

@media (max-width: 768px) {

    .makerspace-page .makerspace-section-icon {
        width: 68px;
        height: 68px;
    }

}
/* =========================================================
   MAKERSPACE – Detailraster innerhalb der Bereiche
   ========================================================= */

.makerspace-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 20px;
}

.makerspace-detail-item {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 14px 16px;

    background: #ffffff;
    border: 1px solid #dddddd;
    border-left: 3px solid #d62828;
    border-radius: 3px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.makerspace-detail-item strong {
    font-weight: 700;
}

.makerspace-detail-item span {
    line-height: 1.45;
}

@media (max-width: 700px) {
    .makerspace-detail-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   FIX MAKERSPACE – Icons nicht wiederholen
   ========================================================= */

.makerspace-section {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;

    margin-top: 24px;
    padding: 28px 32px;

    background: #fafafa;
    border: 1px solid #dddddd;
    border-radius: 3px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}


/* Icon-Bereich */

.makerspace-section-icon {
    width: 70px;
    height: 70px;

    justify-self: center;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 60px 60px !important;
}


/* =========================================================
   Farben der Bereiche
   ========================================================= */

.makerspace-red {
    border-left: 4px solid #e52b2f;
}

.makerspace-yellow {
    border-left: 4px solid #f2a900;
}

.makerspace-green {
    border-left: 4px solid #159447;
}


/* =========================================================
   Text
   ========================================================= */

.makerspace-section-text h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.makerspace-section-text > p {
    margin-bottom: 12px;
}


/* =========================================================
   Detailkacheln 3D-Druck
   ========================================================= */

.makerspace-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 20px;
}

.makerspace-detail-item {
    display: flex;
    flex-direction: column;
    gap: 5px;

    padding: 14px 16px;

    background: #ffffff;

    border: 1px solid #dddddd;
    border-left: 3px solid #e52b2f;
    border-radius: 3px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}


/* =========================================================
   Smartphone
   ========================================================= */

@media (max-width: 700px) {

    .makerspace-section {
        grid-template-columns: 1fr;
        padding: 22px 18px;
    }

    .makerspace-section-icon {
        margin-bottom: 15px;
    }

    .makerspace-detail-grid {
        grid-template-columns: 1fr;
    }
}
/* 3D-Druck-Icon im großen Bereich weiter nach oben setzen */
.makerspace-red .makerspace-section-icon {
    align-self: start;
    margin-top: 25px;
}
/* =========================================================
   MAKERSPACE – Ausstattungslisten
   ========================================================= */

.makerspace-equipment-list {
    margin: 8px 0 0;
    padding-left: 20px;
}

.makerspace-equipment-list li {
    margin-bottom: 4px;
    line-height: 1.4;
}

.makerspace-equipment-list li:last-child {
    margin-bottom: 0;
}
/* =========================================================
   FIX – Fettschrift innerhalb der Makerspace-Detailkacheln
   ========================================================= */

/* Überschrift der jeweiligen Kachel darf weiterhin
   eine eigene Zeile bilden */
.makerspace-detail-item > strong {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
}

/* Hervorgehobene Begriffe IM Fließtext müssen inline bleiben */
.makerspace-detail-item span strong {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: inherit !important;
}

/* Text selbst normal als zusammenhängender Fließtext */
.makerspace-detail-item span {
    display: block;
    margin: 0;
}
/* =========================================================
   MAKERSPACE – Farbe der Unterkacheln je Bereich
   ========================================================= */

/* 3D-Druck – Rot */
.makerspace-red .makerspace-detail-item {
    border-left-color: #d62828;
}

/* Elektronik – Orange */
.makerspace-orange .makerspace-detail-item {
    border-left-color: #f2a900;
}

/* Computer & Technik – Gelb */
.makerspace-yellow .makerspace-detail-item {
    border-left-color: #f2c500;
}

/* Werkstatt – Grün */
.makerspace-green .makerspace-detail-item {
    border-left-color: #159447;
}
/* =========================================================
   MAKERSPACE – WAS KANNST DU BEI UNS MACHEN?
   ========================================================= */

.makerspace-possibilities {
    margin-top: 50px;
}

.makerspace-possibilities > h2 {
    margin-bottom: 12px;
}

.makerspace-possibilities-intro {
    max-width: 950px;
    margin-bottom: 25px;
    line-height: 1.6;
}


/* 6 Möglichkeiten */

.makerspace-possibilities-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.makerspace-possibility-item {
    display: flex;
    flex-direction: column;
    gap: 7px;

    padding: 20px 18px;

    background: #ffffff;
    border: 1px solid #dddddd;
    border-top: 4px solid #20252b;
    border-radius: 4px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.makerspace-possibility-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.12);
}

.makerspace-possibility-item strong {
    font-weight: 700;
}

.makerspace-possibility-item span {
    line-height: 1.5;
}


/* LABO-Farben bei den sechs Kacheln */

.makerspace-possibility-item:nth-child(1),
.makerspace-possibility-item:nth-child(2) {
    border-top-color: #d62828;
}

.makerspace-possibility-item:nth-child(3),
.makerspace-possibility-item:nth-child(4) {
    border-top-color: #f2a900;
}

.makerspace-possibility-item:nth-child(5),
.makerspace-possibility-item:nth-child(6) {
    border-top-color: #159447;
}


/* =========================================================
   ABSCHLUSS / CALL TO ACTION
   ========================================================= */

.makerspace-cta {
    margin-top: 35px;
    padding: 30px 35px;

    background: #f5f5f5;
    border-left: 5px solid #d62828;
}

.makerspace-cta h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.makerspace-cta p {
    max-width: 900px;
    line-height: 1.6;
}


/* Tablet */

@media (max-width: 900px) {

    .makerspace-possibilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* Smartphone */

@media (max-width: 600px) {

    .makerspace-possibilities-grid {
        grid-template-columns: 1fr;
    }

    .makerspace-cta {
        padding: 25px 20px;
    }

}
/* =========================================================
   ÜBER-UNS-SEITE
   ========================================================= */

.about-page {
    width: 100%;
}

.about-intro {
    margin-bottom: 35px;
}

.about-intro h2 {
    margin-bottom: 12px;
}

.about-intro p {
    max-width: 1050px;
    line-height: 1.6;
}

/* =========================================================
   GROSSE ÜBER-UNS-BEREICHE
   ========================================================= */

.about-section {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 28px;
    align-items: start;

    margin-top: 24px;
    margin-bottom: 28px;
    padding: 32px 38px;

    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-left: 5px solid;
    border-radius: 3px;

    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.about-section:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.11);
}

/* =========================================================
   NUMMERN 01 / 02 / 03 / 04
   ========================================================= */

.about-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 82px;
    height: 82px;

    border: 2px solid currentColor;
    border-radius: 50%;

    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;

    justify-self: center;
    margin-top: 3px;
}

/* Farben */
.about-red {
    border-left-color: #d62828;
}

.about-red .about-number {
    color: #d62828;
}

.about-orange {
    border-left-color: #f2a900;
}

.about-orange .about-number {
    color: #f2a900;
}

.about-yellow {
    border-left-color: #f2c500;
}

.about-yellow .about-number {
    color: #f2c500;
}

.about-green {
    border-left-color: #159447;
}

.about-green .about-number {
    color: #159447;
}

/* =========================================================
   TEXTE IN DEN GROSSEN BEREICHEN
   ========================================================= */

.about-section-text h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.about-section-text > p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.55;
}

/* =========================================================
   DETAILKACHELN
   ========================================================= */

.about-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.about-detail-item {
    padding: 16px 18px;

    background: #ffffff;
    border: 1px solid #dddddd;
    border-left: 3px solid;
    border-radius: 3px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.about-detail-item > strong {
    display: block;
    margin-bottom: 7px;
    font-weight: 700;
}

.about-detail-item p {
    margin: 0;
    line-height: 1.5;
}

.about-red .about-detail-item {
    border-left-color: #d62828;
}

.about-orange .about-detail-item {
    border-left-color: #f2a900;
}

.about-yellow .about-detail-item {
    border-left-color: #f2c500;
}

.about-green .about-detail-item {
    border-left-color: #159447;
}

/* =========================================================
   VON DER IDEE ZUM PROJEKT – ABLAUF
   ========================================================= */

.about-process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

.about-process-item {
    position: relative;
    padding: 18px 16px;

    background: #ffffff;
    border: 1px solid #dddddd;
    border-top: 4px solid #f2c500;
    border-radius: 3px;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.about-process-item > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-bottom: 10px;

    background: #f2c500;
    border-radius: 50%;

    font-weight: 700;
    color: #111111;
}

.about-process-item > strong {
    display: block;
    margin-bottom: 6px;
    font-weight: 700;
}

.about-process-item p {
    margin: 0;
    line-height: 1.45;
}

/* Fallback für den aktuellen Joomla-HTML-Stand,
   falls die Ziffer als Text statt im span landet */
.about-process-item {
    font-weight: 400;
}

/* =========================================================
   ABSCHLUSS / CALL TO ACTION
   ========================================================= */

.about-cta {
    margin-top: 42px;
    padding: 32px 38px;

    background: #f5f5f5;
    border-left: 5px solid #d62828;
}

.about-cta h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.about-cta p {
    max-width: 900px;
    margin-bottom: 0;
    line-height: 1.6;
}

.about-button {
    display: inline-block;

    margin-top: 14px;
    padding: 10px 18px;

    background: #20252b;
    color: #ffffff !important;

    border-radius: 3px;

    font-weight: 600;
    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.about-button:hover {
    background: #d62828;
    color: #ffffff !important;
    text-decoration: none !important;

    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.about-button:focus-visible {
    outline: 2px solid #20252b;
    outline-offset: 3px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .about-section {
        grid-template-columns: 80px 1fr;
        gap: 20px;
        padding: 28px 25px;
    }

    .about-number {
        width: 64px;
        height: 64px;
        font-size: 1.3rem;
    }

    .about-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 700px) {

    .about-section {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px 18px;
    }

    .about-number {
        justify-self: start;
        width: 56px;
        height: 56px;
        font-size: 1.1rem;
        margin-bottom: 4px;
    }

    .about-detail-grid {
        grid-template-columns: 1fr;
    }

    .about-process {
        grid-template-columns: 1fr;
    }

    .about-cta {
        padding: 25px 20px;
    }

}

/* =========================================================
   STARTSEITE – FINALE REGELN
   Diese Regeln stehen bewusst am Dateiende und haben Vorrang.
   ========================================================= */

/* Einleitung */
.home-page .home-intro {
    margin-bottom: 0;
}

.home-page .home-intro h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

.home-page .home-intro p {
    margin-top: 0;
    margin-bottom: 14px;
    line-height: 1.55;
}

.home-page .home-intro p:last-child {
    margin-bottom: 0;
}

/* Was wir machen */
.home-page > h2.mt-5 {
    margin-top: 32px !important;
    margin-bottom: 20px !important;
}

/* Makerspace auf der Startseite */
.home-page .makerspace-home {
    margin-top: 42px;
}

/* =========================================================
   STARTSEITE – ABSCHLUSS / MITMACHEN
   ========================================================= */

.home-page .home-cta {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.65fr);
    gap: 45px;
    align-items: center;

    margin-top: 38px;
    padding: 32px 40px;

    background: #f5f5f5;
    border-left: 5px solid #d62828;
}

.home-page .home-cta-text {
    max-width: 900px;
}

.home-page .home-cta h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

.home-page .home-cta p {
    margin-top: 0;
    margin-bottom: 10px;
    line-height: 1.55;
}

.home-page .home-cta p:last-child {
    margin-bottom: 0;
}

.home-page .home-cta-actions {
    width: 100%;
    max-width: 300px;
    justify-self: end;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.home-page .home-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 46px;
    box-sizing: border-box;

    padding: 10px 18px;

    border-radius: 3px;

    font-weight: 600;
    text-align: center;
    text-decoration: none !important;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.home-page .home-button-dark {
    background: #20252b;
    color: #ffffff !important;
}

.home-page .home-button-red {
    background: #d62828;
    color: #ffffff !important;
}

.home-page .home-button:hover {
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.home-page .home-button-dark:hover {
    background: #d62828;
}

.home-page .home-button-red:hover {
    background: #20252b;
}

.home-page .home-button:focus-visible,
.home-page .makerspace-button:focus-visible {
    outline: 2px solid #20252b;
    outline-offset: 3px;
}

/* Tablet */
@media (max-width: 900px) {

    .home-page .home-cta {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 25px;
    }

    .home-page .home-cta-actions {
        max-width: none;
        justify-self: stretch;
        flex-direction: row;
    }

    .home-page .home-button {
        flex: 1;
    }
}

/* =========================================================
   STARTSEITE – SMARTPHONE FINALE FEINABSTIMMUNG
   ========================================================= */

@media (max-width: 600px) {

    .home-page {
        padding-top: 10px;
    }

    /* Einleitung */
    .home-page .home-intro {
        padding-top: 0;
    }

    .home-page .home-intro h2 {
        margin-bottom: 10px;
        line-height: 1.18;
    }

    .home-page .home-intro p {
        margin-bottom: 13px;
        line-height: 1.5;
    }

    /* Was wir machen */
    .home-page > h2.mt-5 {
        margin-top: 26px !important;
        margin-bottom: 14px !important;
    }

    .home-page .row.g-4 {
        --bs-gutter-y: 14px;
    }

    /* Bootstrap h-100 auf Mobil nicht die Karten unnötig strecken lassen */
    .home-page .brainflush-card,
    .home-page .brainflush-card.h-100 {
        min-height: 0 !important;
        height: auto !important;
    }

    .home-page .brainflush-card .card-body {
        min-height: 0 !important;
        padding: 16px 14px 17px !important;
    }

    .home-page .brainflush-icon {
        width: 58px !important;
        height: 58px !important;
        margin: 0 auto 8px !important;
    }

    .home-page .brainflush-card h3 {
        margin: 0 0 6px !important;
        font-size: 1.22rem;
        line-height: 1.2;
    }

    .home-page .brainflush-card .card-text {
        margin: 0;
        line-height: 1.4;
    }

    /* Unser Makerspace */
    .home-page .makerspace-home {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 26px;
        padding: 20px 14px;
    }

    .home-page .makerspace-home h2 {
        margin-bottom: 10px;
        line-height: 1.2;
    }

    .home-page .makerspace-lead,
    .home-page .makerspace-home-text p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .home-page .makerspace-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        box-sizing: border-box;
        margin-top: 12px;
        padding: 9px 14px;
        text-align: center;
    }

    .home-page .makerspace-features {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .home-page .makerspace-feature {
        min-height: 58px;
        padding: 10px 10px;
    }

    /* Mitmachen */
    .home-page .home-cta {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 26px;
        padding: 20px 14px;
    }

    .home-page .home-cta h2 {
        margin-bottom: 10px;
        line-height: 1.18;
    }

    .home-page .home-cta p {
        line-height: 1.5;
    }

    .home-page .home-cta-actions {
        width: 100%;
        max-width: none;
        flex-direction: column;
        gap: 9px;
    }

    .home-page .home-button {
        width: 100%;
        min-height: 44px;
        padding: 9px 14px;
    }
}

/* =========================================================
   PROJEKTÜBERSICHT – WIEDERHERGESTELLTE FINALE REGELN
   ========================================================= */

.projects-page { width: 100%; }
.projects-page .projects-intro { margin-bottom: 35px; }
.projects-page .projects-intro h2 { margin-top: 0; margin-bottom: 12px; }
.projects-page .projects-intro p { max-width: 1050px; margin-top: 0; margin-bottom: 10px; line-height: 1.6; }
.projects-page .projects-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }

.projects-page .project-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 30px 35px;
    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-left: 5px solid #20252b;
    border-radius: 3px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.projects-page .project-card:hover { transform: translateY(-3px); box-shadow: 0 9px 22px rgba(0, 0, 0, 0.11); }

.projects-page .project-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin: 2px auto 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
}

.projects-page .project-orange { border-left-color: #f2a900; }
.projects-page .project-orange .project-number,
.projects-page .project-orange .project-category { color: #f2a900; }
.projects-page .project-red { border-left-color: #d62828; }
.projects-page .project-red .project-number,
.projects-page .project-red .project-category { color: #d62828; }
.projects-page .project-green { border-left-color: #159447; }
.projects-page .project-green .project-number,
.projects-page .project-green .project-category { color: #159447; }
.projects-page .project-yellow { border-left-color: #e8b900; }
.projects-page .project-yellow .project-number,
.projects-page .project-yellow .project-category { color: #d9ad00; }

.projects-page .project-content { min-width: 0; }
.projects-page .project-content h2 { margin-top: 4px; margin-bottom: 12px; font-size: 1.7rem; line-height: 1.2; }
.projects-page .project-content p { max-width: 1050px; margin-top: 0; margin-bottom: 10px; line-height: 1.55; }
.projects-page .project-category {
    display: inline-block;
    margin-bottom: 2px;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.projects-page .project-status,
.projects-page .project-status-badge {
    display: inline-flex;
    align-items: center;
    margin: 4px 0 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #159447;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.projects-page ul.project-tech {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.projects-page ul.project-tech > li {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px 11px !important;
    background: #ffffff !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 4px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    list-style: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.projects-page ul.project-tech > li:hover { transform: translateY(-2px); background: #f7f7f7 !important; box-shadow: 0 4px 9px rgba(0,0,0,.09) !important; }
.projects-page .project-orange ul.project-tech > li { border-left: 4px solid #f2a900 !important; }
.projects-page .project-red ul.project-tech > li { border-left: 4px solid #d62828 !important; }
.projects-page .project-green ul.project-tech > li { border-left: 4px solid #159447 !important; }
.projects-page .project-yellow ul.project-tech > li { border-left: 4px solid #e8b900 !important; }

.projects-page .project-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 9px 15px;
    background: #20252b;
    color: #ffffff !important;
    border-radius: 3px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.projects-page .project-card-link:hover { color: #ffffff !important; text-decoration: none !important; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.14); }
.projects-page .project-orange .project-card-link:hover { background: #f2a900; }
.projects-page .project-red .project-card-link:hover { background: #d62828; }
.projects-page .project-green .project-card-link:hover { background: #159447; }
.projects-page .project-yellow .project-card-link:hover { background: #d9ad00; }
.projects-page .project-card-link:focus-visible { outline: 2px solid #20252b; outline-offset: 3px; }

.projects-page .projects-cta { margin-top: 42px; padding: 30px 35px; background: #f5f5f5; border-left: 5px solid #d62828; }
.projects-page .projects-cta h2 { margin-top: 0; margin-bottom: 10px; }
.projects-page .projects-cta p { max-width: 900px; margin-top: 0; margin-bottom: 10px; line-height: 1.6; }
.projects-page .projects-button {
    display: inline-block;
    margin-top: 10px;
    padding: 11px 18px;
    background: #20252b;
    color: #ffffff !important;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.projects-page .projects-button:hover { background: #d62828; color: #ffffff !important; text-decoration: none !important; transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,.15); }

@media (max-width: 800px) {
    .projects-page .project-card { grid-template-columns: 80px minmax(0, 1fr); gap: 20px; padding: 26px 24px; }
    .projects-page .project-number { width: 62px; height: 62px; font-size: 1.2rem; }
}

@media (max-width: 600px) {
    .projects-page .projects-intro { margin-bottom: 25px; }
    .projects-page .projects-grid { gap: 20px; }
    .projects-page .project-card { grid-template-columns: 1fr; gap: 14px; padding: 24px 20px; }
    .projects-page .project-number { width: 55px; height: 55px; margin: 0; font-size: 1.05rem; }
    .projects-page .project-content h2 { font-size: 1.5rem; }
    .projects-page ul.project-tech { gap: 6px !important; }
    .projects-page .project-card-link { display: flex; width: 100%; min-height: 44px; box-sizing: border-box; justify-content: center; margin-top: 20px; text-align: center; }
    .projects-page .projects-cta { margin-top: 30px; padding: 25px 20px; }
    .projects-page .projects-button { display: block; width: 100%; box-sizing: border-box; text-align: center; }
}

/* =========================================================
   PROJEKT-DETAILSEITEN – WIEDERHERGESTELLTE BASIS
   ========================================================= */

.project-detail-page { max-width: 1320px; margin: 0 auto; }
.project-back { display: inline-block; margin-bottom: 25px; color: #333333; text-decoration: none; font-weight: 600; }
.project-back:hover { text-decoration: underline; }
.project-detail-header { margin-bottom: 30px; }
.project-detail-heading {
    display: grid;
    grid-template-columns: 95px 1fr;
    gap: 30px;
    align-items: start;
    padding: 32px 35px;
    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-left: 5px solid #f2a900;
    box-shadow: 0 5px 16px rgba(0,0,0,.05);
}
.project-detail-number {
    width: 78px; height: 78px; display: flex; align-items: center; justify-content: center;
    border: 2px solid #f2a900; border-radius: 50%; color: #f2a900; font-size: 1.45rem; font-weight: 700;
}
.project-detail-category { display: block; margin-bottom: 6px; color: #f2a900; font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.project-detail-title h2 { margin: 0 0 12px; font-size: 2rem; }
.project-detail-lead { max-width: 900px; margin: 0; font-size: 1.08rem; line-height: 1.65; }
.project-detail-section { position: relative; margin-top: 28px; padding: 30px 35px; background: #f7f7f7; border: 1px solid #dddddd; border-left: 5px solid #f2a900; box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.project-detail-section h2 { margin-top: 0; margin-bottom: 14px; }
.project-detail-section p { line-height: 1.65; }
.project-detail-section p:last-child { margin-bottom: 0; }
.project-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.project-info-item { padding: 18px; background: #fff; border: 1px solid #d8d8d8; border-top: 3px solid #f2a900; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.project-info-item strong { display: block; margin-bottom: 6px; }
.project-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.project-feature-item { padding: 20px; background: #fff; border: 1px solid #d8d8d8; border-left: 3px solid #f2a900; box-shadow: 0 2px 6px rgba(0,0,0,.04); transition: transform .2s ease, box-shadow .2s ease; }
.project-feature-item:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(0,0,0,.08); }
.project-feature-item strong { display: block; margin-bottom: 7px; }
.project-feature-item p { margin: 0; }
.project-detail-tech { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.project-detail-tech li { display: inline-flex; align-items: center; padding: 7px 12px; background: #fff; border: 1px solid #d8d8d8; border-left: 4px solid #f2a900; border-radius: 4px; font-size: .9rem; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.project-detail-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 36px; padding: 30px 35px; background: #f5f5f5; border-left: 5px solid #d62828; }
.project-detail-cta h2 { margin-top: 0; margin-bottom: 8px; }
.project-detail-cta p { margin: 0; }
.project-detail-button { flex-shrink: 0; display: inline-block; padding: 12px 20px; background: #20252b; color: #fff !important; text-decoration: none !important; font-weight: 700; border-radius: 3px; transition: transform .2s ease, background-color .2s ease; }
.project-detail-button:hover { background: #d62828; transform: translateY(-2px); }

.project-detail-red .project-detail-heading,
.project-detail-red .project-detail-section { border-left-color: #d62828; }
.project-detail-red .project-detail-number { border-color: #d62828; color: #d62828; }
.project-detail-red .project-detail-category { color: #d62828; }
.project-detail-red .project-info-item { border-top-color: #d62828; }
.project-detail-red .project-feature-item,
.project-detail-red .project-detail-tech li { border-left-color: #d62828; }

.project-detail-green .project-detail-heading,
.project-detail-green .project-detail-section { border-left-color: #159447; }
.project-detail-green .project-detail-number { border-color: #159447; color: #159447; }
.project-detail-green .project-detail-category { color: #159447; }
.project-detail-green .project-info-item { border-top-color: #159447; }
.project-detail-green .project-feature-item,
.project-detail-green .project-detail-tech li { border-left-color: #159447; }

.project-detail-yellow .project-detail-heading,
.project-detail-yellow .project-detail-section { border-left-color: #e8b900; }
.project-detail-yellow .project-detail-number { border-color: #e8b900; color: #d9ad00; }
.project-detail-yellow .project-detail-category { color: #d9ad00; }
.project-detail-yellow .project-info-item { border-top-color: #e8b900; }
.project-detail-yellow .project-feature-item,
.project-detail-yellow .project-detail-tech li { border-left-color: #e8b900; }

@media (max-width: 900px) {
    .project-info-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .project-feature-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .project-detail-heading { grid-template-columns: 1fr; gap: 16px; padding: 24px 20px; }
    .project-detail-number { width: 55px; height: 55px; font-size: 1.05rem; }
    .project-detail-title h2 { font-size: 1.6rem; }
    .project-detail-lead { font-size: 1rem; line-height: 1.55; }
    .project-detail-section { margin-top: 22px; padding: 24px 20px; }
    .project-info-grid { grid-template-columns: 1fr; }
    .project-feature-grid { grid-template-columns: 1fr; gap: 10px; }
    .project-feature-item { padding: 14px 15px; }
    .project-detail-tech { gap: 7px; }
    .project-detail-tech li { max-width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: .82rem; }
    .project-detail-cta { display: block; margin-top: 28px; padding: 25px 20px; }
    .project-detail-button { display: block; width: 100%; box-sizing: border-box; margin-top: 20px; text-align: center; }
}

/* =========================================================
   KONTAKTSEITE – JOOMLA 6 / CLOUDFLARE TURNSTILE
   ========================================================= */

body.view-contact .contact {
    width: 100%;
}

body.view-contact .contact h1,
body.view-contact .contact h2,
body.view-contact .contact h3 {
    color: #111111;
}

/* Kontaktdaten */
body.view-contact .contact-address,
body.view-contact .com-contact__address {
    max-width: 620px;
    margin: 24px 0 34px;
    padding: 22px 24px;

    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-left: 5px solid #d62828;
    border-radius: 3px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

body.view-contact .contact-address dd,
body.view-contact .com-contact__address dd {
    margin-bottom: 8px;
    line-height: 1.5;
}

body.view-contact .contact-address dt,
body.view-contact .com-contact__address dt {
    color: #20252b;
}

body.view-contact .contact-address a,
body.view-contact .com-contact__address a {
    color: #d62828;
    text-decoration: none;
}

body.view-contact .contact-address a:hover,
body.view-contact .com-contact__address a:hover {
    text-decoration: underline;
}

/* Kontaktformular als große Karte */
body.view-contact .contact-form,
body.view-contact .com-contact__form {
    margin-top: 28px;
    padding: 30px 34px;

    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-left: 5px solid #f2a900;
    border-radius: 3px;

    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.07);
}

body.view-contact .contact-form > h3,
body.view-contact .com-contact__form > h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.55rem;
}

/* Joomla Formulargruppen */
body.view-contact .contact-form .control-group,
body.view-contact .com-contact__form .control-group {
    margin-bottom: 17px;
}

body.view-contact .contact-form .control-label,
body.view-contact .com-contact__form .control-label {
    margin-bottom: 6px;
}

body.view-contact .contact-form .control-label label,
body.view-contact .com-contact__form .control-label label {
    font-weight: 600;
    color: #20252b;
}

body.view-contact .contact-form .controls,
body.view-contact .com-contact__form .controls {
    width: 100%;
}

/* Eingabefelder */
body.view-contact .contact-form .form-control,
body.view-contact .com-contact__form .form-control,
body.view-contact .contact-form input[type="text"],
body.view-contact .contact-form input[type="email"],
body.view-contact .contact-form textarea,
body.view-contact .com-contact__form input[type="text"],
body.view-contact .com-contact__form input[type="email"],
body.view-contact .com-contact__form textarea {
    width: 100%;
    max-width: none;
    box-sizing: border-box;

    padding: 10px 12px;

    background: #ffffff;
    color: #111111;

    border: 1px solid #cfcfcf;
    border-radius: 3px;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

body.view-contact .contact-form input[type="text"],
body.view-contact .contact-form input[type="email"],
body.view-contact .com-contact__form input[type="text"],
body.view-contact .com-contact__form input[type="email"] {
    min-height: 44px;
}

body.view-contact .contact-form textarea,
body.view-contact .com-contact__form textarea {
    min-height: 180px;
    resize: vertical;
}

body.view-contact .contact-form .form-control:focus,
body.view-contact .com-contact__form .form-control:focus,
body.view-contact .contact-form input:focus,
body.view-contact .contact-form textarea:focus,
body.view-contact .com-contact__form input:focus,
body.view-contact .com-contact__form textarea:focus {
    border-color: #f2a900;
    outline: none;
    box-shadow: 0 0 0 3px rgba(242, 169, 0, 0.16);
}

/* Joomla Validierungsfehler */
body.view-contact .contact-form .has-danger .form-control,
body.view-contact .com-contact__form .has-danger .form-control,
body.view-contact .contact-form .form-control-danger,
body.view-contact .com-contact__form .form-control-danger {
    border-color: #d62828;
}

body.view-contact .contact-form .form-control-feedback,
body.view-contact .com-contact__form .form-control-feedback {
    display: block;
    margin-top: 4px;
    color: #d62828;
    font-size: 0.88rem;
}

/* Pflichtfeld-Hinweis */
body.view-contact .contact-form .star,
body.view-contact .com-contact__form .star {
    color: #d62828;
}

/* Turnstile etwas vom Formular absetzen */
body.view-contact .cf-turnstile,
body.view-contact iframe[src*="challenges.cloudflare.com"] {
    margin-top: 8px;
    margin-bottom: 14px;
}

/* Senden-Button */
body.view-contact .contact-form .btn-primary,
body.view-contact .com-contact__form .btn-primary,
body.view-contact .contact-form button[type="submit"],
body.view-contact .com-contact__form button[type="submit"] {
    min-height: 44px;
    padding: 10px 20px;

    background: #20252b;
    color: #ffffff;

    border: 0;
    border-radius: 3px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

body.view-contact .contact-form .btn-primary:hover,
body.view-contact .com-contact__form .btn-primary:hover,
body.view-contact .contact-form button[type="submit"]:hover,
body.view-contact .com-contact__form button[type="submit"]:hover {
    background: #d62828;
    color: #ffffff;

    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   KONTAKTSEITE – SMARTPHONE
   ========================================================= */

@media (max-width: 600px) {

    body.view-contact .contact-address,
    body.view-contact .com-contact__address {
        max-width: none;
        margin: 20px 0 25px;
        padding: 18px 16px;
    }

    body.view-contact .contact-form,
    body.view-contact .com-contact__form {
        margin-top: 22px;
        padding: 22px 16px;
    }

    body.view-contact .contact-form > h3,
    body.view-contact .com-contact__form > h3 {
        font-size: 1.35rem;
    }

    body.view-contact .contact-form .control-group,
    body.view-contact .com-contact__form .control-group {
        margin-bottom: 14px;
    }

    body.view-contact .contact-form textarea,
    body.view-contact .com-contact__form textarea {
        min-height: 150px;
    }

    body.view-contact .contact-form .btn-primary,
    body.view-contact .com-contact__form .btn-primary,
    body.view-contact .contact-form button[type="submit"],
    body.view-contact .com-contact__form button[type="submit"] {
        width: 100%;
    }
}
/* =========================================================
   KONTAKTSEITE – FINALES 2-SPALTEN-LAYOUT DESKTOP
   ========================================================= */

@media (min-width: 901px) {

    body.view-contact .com-contact__container {
        display: grid;
        grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.55fr);
        grid-template-rows: auto auto;
        column-gap: 34px;
        row-gap: 14px;
        align-items: start;
    }

    /* Erste Überschrift: Kontakt */
    body.view-contact .com-contact__container > h2:nth-of-type(1) {
        grid-column: 1;
        grid-row: 1;
        margin: 0 0 8px;
    }

    /* Kontaktdaten links */
    body.view-contact .com-contact__info {
        grid-column: 1;
        grid-row: 2;
        min-width: 0;
    }

    body.view-contact .com-contact__info .contact-address,
    body.view-contact .com-contact__info .com-contact__address {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin: 0;
        min-height: 100%;
    }

    /* Zweite Überschrift: Kontaktformular */
    body.view-contact .com-contact__container > h2:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 8px;
    }

    /* Formular rechts */
    body.view-contact .com-contact__form {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
        box-sizing: border-box;
        margin-top: 0;
    }
}


/* =========================================================
   KONTAKTSEITE – KOMPAKTERE TYPOGRAFIE UND ABSTÄNDE
   ========================================================= */

body.view-contact .com-contact__container {
    margin-top: 22px;
}

body.view-contact .com-contact__container > h2 {
    line-height: 1.2;
}

body.view-contact .com-contact__form > h3,
body.view-contact .com-contact__form legend {
    margin-top: 0;
}


/* =========================================================
   KONTAKTSEITE – TABLET / SMARTPHONE EINSPALTIG
   ========================================================= */

@media (max-width: 900px) {

    body.view-contact .com-contact__container {
        display: block;
        margin-top: 18px;
    }

    body.view-contact .com-contact__container > h2 {
        margin-top: 0;
        margin-bottom: 12px;
    }

    body.view-contact .com-contact__container > h2:nth-of-type(2) {
        margin-top: 28px;
    }

    body.view-contact .com-contact__info .contact-address,
    body.view-contact .com-contact__info .com-contact__address {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        margin: 0;
    }

    body.view-contact .com-contact__form {
        width: 100%;
        box-sizing: border-box;
        margin-top: 0;
    }
}
/* =========================================================
   KONTAKTSEITE – finales Layout
   ========================================================= */

body.view-contact .com-contact__container {
    width: 100%;
}

/* Überschriften Kontakt / Kontaktformular */
body.view-contact .com-contact__container > h2 {
    margin-top: 0;
    margin-bottom: 20px;
}

/* Abstand vor Kontaktformular */
body.view-contact .com-contact__container > .com-contact__info + h2 {
    margin-top: 24px;
}


/* ---------------------------------------------------------
   ADRESSKARTE
   --------------------------------------------------------- */

body.view-contact .com-contact__info {
    width: 100%;
    max-width: 480px;
    margin: 0 0 0 0;
}

body.view-contact .com-contact__address {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 22px 28px;

    box-sizing: border-box;

    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-left: 5px solid #e02b2b;
    border-radius: 3px;

    box-shadow: 0 5px 14px rgba(0,0,0,0.05);
}


/* ---------------------------------------------------------
   KONTAKTFORMULAR
   --------------------------------------------------------- */

body.view-contact .com-contact__form {
    width: 100%;
    max-width: none;

    box-sizing: border-box;

    padding: 32px 36px;

    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-left: 5px solid #f0a500;
    border-radius: 3px;

    box-shadow: 0 5px 14px rgba(0,0,0,0.05);
}


/* Eingabefelder */
body.view-contact .com-contact__form input[type="text"],
body.view-contact .com-contact__form input[type="email"],
body.view-contact .com-contact__form textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    body.view-contact .com-contact__info {
        max-width: 100%;
    }

    body.view-contact .com-contact__address {
        padding: 18px 20px;
    }

    body.view-contact .com-contact__form {
        padding: 22px 20px;
    }

}
/* =========================================================
   BRAINFLUSH LABORATORY – FOOTER
   ========================================================= */

/* kompletter Footer */
.container-footer {
    margin-top: 0;

    padding: 0;

    background: #20252b !important;
    color: #ffffff;

    border-top: 4px solid #d62828;
}


/* innerer Footer-Bereich */
.container-footer .grid-child {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;
    padding: 20px 30px;

    box-sizing: border-box;
}


/* Menü-Modul */
.container-footer .mod-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* einzelne Menüeinträge */
.container-footer .mod-menu > li {
    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Trennpunkt zwischen den Links */
.container-footer .mod-menu > li:not(:last-child)::after {
    content: "·";

    margin: 0 14px;

    color: #777d83;
}


/* Links */
.container-footer .mod-menu > li > a {
    display: inline-block;

    padding: 5px 0;

    color: #ffffff !important;

    font-size: 0.92rem;
    font-weight: 500;

    text-decoration: none !important;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}


/* Hover */
.container-footer .mod-menu > li > a:hover {
    color: #f2a900 !important;
    text-decoration: none !important;
}


/* Tastatur-Navigation */
.container-footer .mod-menu > li > a:focus-visible {
    outline: 2px solid #f2a900;
    outline-offset: 4px;
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 600px) {

    .container-footer .grid-child {
        padding: 18px 16px;
    }

    .container-footer .mod-menu {
        justify-content: center;
    }

    .container-footer .mod-menu > li > a {
        font-size: 0.9rem;
    }

    .container-footer .mod-menu > li:not(:last-child)::after {
        margin: 0 9px;
    }
}
/* =========================================================
   FOOTER – COPYRIGHT + MENÜ
   ========================================================= */

.container-footer .grid-child {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;
    padding: 20px 30px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
    box-sizing: border-box;
}


/* Copyright links */
.container-footer .footer-copyright {
    order: 1;

    margin: 0;

    color: #ffffff;
    font-size: 0.92rem;
    white-space: nowrap;
}


/* Menü rechts */
.container-footer .mod-menu {
    order: 2;

    margin: 0 0 0 auto;
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 700px) {

    .container-footer .grid-child {
        padding: 18px 16px;

        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 7px;

        text-align: center;
    }

    .container-footer .footer-copyright {
        order: 1;
        white-space: normal;
    }

    .container-footer .mod-menu {
        order: 2;
        margin: 0;
        justify-content: center;
    }
}
/* =========================================================
   CLOUDFLARE TURNSTILE – MOBILE
   ========================================================= */

@media (max-width: 500px) {

    .cf-turnstile {
        width: 300px;
        max-width: none;
        overflow: visible;

        transform: scale(0.78);
        transform-origin: left top;

        /* gleicht die durch das Skalieren entstehende Höhe aus */
        margin-bottom: -14px;
    }

    .cf-turnstile iframe {
        max-width: none !important;
    }

}
/* =========================================================
   DOWNLOAD-SEITE
   ========================================================= */

.downloads-page {
    width: 100%;
}

.downloads-intro {
    margin-bottom: 34px;
}

.downloads-intro h2 {
    margin-bottom: 12px;
}


/* ---------------------------------------------------------
   DOWNLOAD-KARTEN
   --------------------------------------------------------- */

.download-card {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 34px;

    margin-bottom: 24px;
    padding: 32px 36px;

    background: #f7f7f7;
    border: 1px solid #dddddd;
    border-radius: 3px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    position: relative;
}


/* farbiger Balken links */

.download-card::before {
    content: "";
    position: absolute;

    left: -1px;
    top: -1px;
    bottom: -1px;

    width: 5px;

    border-radius: 3px 0 0 3px;
}


/* ---------------------------------------------------------
   FARBEN
   --------------------------------------------------------- */

.download-red::before {
    background: #e52222;
}

.download-orange::before {
    background: #f5a400;
}


/* ---------------------------------------------------------
   NUMMER
   --------------------------------------------------------- */

.download-number {
    width: 78px;
    height: 78px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid;
    border-radius: 50%;

    font-size: 22px;
    font-weight: 700;
}

.download-red .download-number {
    color: #e52222;
    border-color: #e52222;
}

.download-orange .download-number {
    color: #f5a400;
    border-color: #f5a400;
}


/* ---------------------------------------------------------
   INHALT
   --------------------------------------------------------- */

.download-content {
    min-width: 0;
}

.download-category {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.download-red .download-category {
    color: #e52222;
}

.download-orange .download-category {
    color: #f5a400;
}

.download-content h2 {
    margin-top: 0;
    margin-bottom: 14px;
}

.download-content p {
    max-width: 900px;
    margin-bottom: 22px;
}


/* ---------------------------------------------------------
   DOWNLOAD-BUTTON
   --------------------------------------------------------- */

.download-button {
    display: inline-block;

    padding: 12px 17px;

    background: #20262c;
    color: #ffffff !important;

    font-weight: 700;
    text-decoration: none !important;

    border-radius: 3px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.download-button:hover,
.download-button:focus {
    background: #343b42;
    color: #ffffff !important;

    transform: translateY(-1px);
}

.download-button span {
    margin-left: 7px;
}


/* =========================================================
   DOWNLOAD-SEITE – MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .downloads-intro {
        margin-bottom: 24px;
    }

    .download-card {
        display: block;

        margin-bottom: 20px;
        padding: 24px 20px 24px 24px;
    }

    .download-number {
        width: 58px;
        height: 58px;

        margin-bottom: 18px;

        font-size: 18px;
    }

    .download-category {
        font-size: 12px;
    }

    .download-content h2 {
        font-size: 24px;
    }

    .download-content p {
        margin-bottom: 20px;
    }

    .download-button {
        display: block;
        width: 100%;

        text-align: center;

        box-sizing: border-box;
    }

}
/* =========================================================
   ÜBER UNS – CTA + INSTAGRAM
   ========================================================= */

.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 18px;
}

.about-instagram-button {
    display: inline-block;

    padding: 11px 18px;

    background: #ffffff;
    color: #20252b !important;

    border: 2px solid #20252b;
    border-radius: 3px;

    font-weight: 700;
    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.about-instagram-button:hover {
    background: #20252b;
    color: #ffffff !important;

    transform: translateY(-2px);
}


/* Smartphone */
@media (max-width: 600px) {

    .about-cta-actions {
        display: block;
    }

    .about-cta-actions .about-button,
    .about-instagram-button {
        display: block;
        width: 100%;

        box-sizing: border-box;
        text-align: center;
    }

    .about-instagram-button {
        margin-top: 10px;
    }

}
/* =========================================================
   HEADER – DESKTOP
   Logo rechts / Navigation links
   ========================================================= */

@media (min-width: 901px) {

    .container-header .grid-child {
        position: relative;
    }

    .container-header .navbar-brand {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin: 0;
    }

    .container-header .navbar-brand img {
        display: block;
        width: 820px;
        max-width: 70%;
        height: auto;
        margin-left: auto;
        margin-right: 35px;
    }

}
/* =========================================================
   HEADER – NAVIGATION DESKTOP
   ========================================================= */

@media (min-width: 901px) {

    .container-header .mod-menu {
        gap: 10px;
    }

    .container-header .mod-menu > li > a {
        font-size: 17px;
        padding-left: 10px;
        padding-right: 10px;
    }

}
/* =========================================================
   HEADER – DESKTOP KOMPAKTER
   ========================================================= */

@media (min-width: 901px) {

    /* Abstand im Header reduzieren */
    .container-header .grid-child {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Logo etwas näher an die Navigation */
    .container-header .navbar-brand {
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: -5px;
    }

    /* Navigation unten etwas kompakter */
    .container-header .container-nav {
        padding-top: 0;
        padding-bottom: 8px;
    }

}
/* =========================================================
   HEADER – MOBILE NAVIGATION 2 x 2
   ========================================================= */

@media (max-width: 900px) {

    .container-header .mod-menu {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 0;
        margin-top: 2px;
    }

    .container-header .mod-menu > li {
        width: 100%;
        margin: 0;
    }

    .container-header .mod-menu > li > a {
        display: block;
        padding: 7px 16px;
        font-size: 16px;
        line-height: 1.4;
    }

    .container-header .container-nav {
        padding-top: 0;
        padding-bottom: 10px;
    }
}
/* =========================================================
   AKTUELLES / TERMINE
   ========================================================= */

.news-page {
    width: 100%;
}

.news-intro {
    margin-bottom: 34px;
}

.news-intro h2 {
    margin-bottom: 12px;
}

.news-intro p {
    max-width: 1000px;
    line-height: 1.6;
}


/* =========================================================
   BRAINDAY / TERMIN-KARTEN
   ========================================================= */

.news-feature,
.news-event {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 30px;
    align-items: start;

    margin-bottom: 24px;
    padding: 30px 34px;

    background: #f7f7f7;

    border: 1px solid #dddddd;
    border-left: 5px solid #f2a900;
    border-radius: 3px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.news-feature {
    background: #f5f5f5;
}


/* =========================================================
   DATUMSKREIS
   ========================================================= */

.news-date {
    width: 92px;
    height: 92px;
    min-width: 92px;
    min-height: 92px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    justify-self: center;

    border: 2px solid #f2a900;
    border-radius: 50%;

    color: #f2a900;

    text-align: center;
    line-height: 1;

    box-sizing: border-box;
}

.news-date-day {
    display: block;

    margin-bottom: 4px;

    font-size: 30px;
    font-weight: 700;
}

.news-date-month {
    display: block;

    margin-bottom: 3px;

    font-size: 14px;
    font-weight: 700;
}

.news-date-year {
    display: block;

    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   INHALT
   ========================================================= */

.news-content {
    min-width: 0;
}

.news-content h2 {
    margin-top: 4px;
    margin-bottom: 12px;

    font-size: 1.7rem;
    line-height: 1.2;
}

.news-content p {
    max-width: 1000px;

    margin-top: 0;
    margin-bottom: 10px;

    line-height: 1.6;
}


/* =========================================================
   KATEGORIE / BRAINDAY-BADGE
   ========================================================= */

.news-category {
    display: inline-block;

    margin-bottom: 5px;

    color: #f2a900;

    font-size: 0.86rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.news-category-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px;

    margin-bottom: 2px;
}

.news-category-row .news-category {
    margin-bottom: 0;
}

.news-status {
    display: inline-block;

    padding: 3px 8px;

    background: #f2a900;
    color: #ffffff;

    border-radius: 999px;

    font-size: 0.72rem;
    font-weight: 700;

    text-transform: uppercase;
}


/* =========================================================
   TERMIN / UHRZEIT / ORT
   ========================================================= */

.news-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

    margin-top: 20px;
}

.news-info-item {
    padding: 14px 16px;

    background: #ffffff;

    border: 1px solid #d8d8d8;
    border-top: 3px solid #f2a900;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
}

.news-info-item strong {
    display: block;

    margin-bottom: 4px;

    font-size: 0.9rem;
}

.news-info-item span {
    display: block;
}


/* =========================================================
   WEITERE TERMINE
   ========================================================= */

.news-heading {
    margin: 40px 0 22px;
}

.news-heading h2 {
    margin-bottom: 7px;
}

.news-heading p {
    margin: 0;
}


/* =========================================================
   FARBEN – ROT
   ========================================================= */

.news-red {
    border-left-color: #e22b2b;
}

.news-red .news-date {
    border-color: #e22b2b;
    color: #e22b2b;
}

.news-red .news-category {
    color: #e22b2b;
}

.news-red .news-info-item {
    border-top-color: #e22b2b;
}


/* =========================================================
   FARBEN – GRÜN
   ========================================================= */

.news-green {
    border-left-color: #169b50;
}

.news-green .news-date {
    border-color: #169b50;
    color: #169b50;
}

.news-green .news-category {
    color: #169b50;
}

.news-green .news-info-item {
    border-top-color: #169b50;
}


/* =========================================================
   ABSCHLUSS / CTA
   ========================================================= */

.news-cta {
    margin-top: 38px;
    padding: 30px 34px;

    background: #f5f5f5;

    border-left: 5px solid #e22b2b;
}

.news-cta h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.news-cta p {
    max-width: 900px;

    margin-top: 0;
    margin-bottom: 16px;

    line-height: 1.6;
}

.news-button {
    display: inline-block;

    padding: 11px 18px;

    background: #20252b;
    color: #ffffff !important;

    border-radius: 3px;

    font-weight: 700;
    text-decoration: none !important;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.news-button:hover {
    background: #e22b2b;
    color: #ffffff !important;

    transform: translateY(-2px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .news-feature,
    .news-event {
        grid-template-columns: 95px minmax(0, 1fr);
        gap: 22px;

        padding: 26px 24px;
    }

    .news-date {
        width: 74px;
        height: 74px;
        min-width: 74px;
        min-height: 74px;
    }

    .news-date-day {
        font-size: 24px;
    }

    .news-date-month {
        font-size: 11px;
    }

    .news-date-year {
        font-size: 9px;
    }

    .news-info-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 600px) {

    .news-intro {
        margin-bottom: 24px;
    }

    /*
     * WICHTIG:
     * Das Desktop-/Tablet-Grid wird hier komplett aufgehoben.
     */
    .news-feature,
    .news-event {
        display: block;

        width: 100%;
        box-sizing: border-box;

        padding: 20px 18px;
        margin-bottom: 20px;
    }


    /* Datum mittig über dem Inhalt */

    .news-date {
        width: 84px;
        height: 84px;
        min-width: 84px;
        min-height: 84px;

        margin: 4px auto 14px;

        box-sizing: border-box;
    }

    .news-date-day {
        margin-bottom: 2px;

        font-size: 20px;
    }

    .news-date-month {
        margin-bottom: 2px;

        font-size: 10px;
    }

    .news-date-year {
        font-size: 8px;
    }


    /* Kategorie */

    .news-category-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        gap: 7px;

        margin-bottom: 7px;
    }

    .news-category {
        font-size: 0.78rem;
    }

    .news-status {
        font-size: 0.68rem;
    }


    /* Überschrift und Texte */

    .news-content {
        width: 100%;
        min-width: 0;
    }

    .news-content h2 {
        margin-top: 0;
        margin-bottom: 12px;

        font-size: 1.5rem;
        line-height: 1.2;
    }

    .news-content p {
        width: 100%;

        margin-bottom: 12px;

        line-height: 1.55;
    }


    /* Termin / Uhrzeit / Ort untereinander */

    .news-info-grid {
        display: grid;
        grid-template-columns: 1fr;

        gap: 8px;

        width: 100%;

        margin-top: 16px;
    }

    .news-info-item {
        width: 100%;
        box-sizing: border-box;

        padding: 12px 14px;
    }


    /* Weitere Termine */

    .news-heading {
        margin-top: 30px;
        margin-bottom: 18px;
    }


    /* Abschluss */

    .news-cta {
        margin-top: 30px;
        padding: 24px 20px;
    }

    .news-button {
        display: block;

        width: 100%;

        box-sizing: border-box;

        text-align: center;
    }
}
/* =========================================================
   ZURÜCK-NACH-OBEN-LINK
   ========================================================= */

.back-to-top-link {
    position: fixed;

    right: 24px;
    bottom: 24px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: #20252b !important;
    color: #ffffff !important;

    border: 2px solid #ffffff;
    border-radius: 50%;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    font-size: 22px;

    text-decoration: none !important;

    z-index: 9999;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.back-to-top-link:hover {
    background: #d62828 !important;
    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top-link:focus-visible {
    outline: 3px solid #f2a900;
    outline-offset: 3px;
}


/* Smartphone */

@media (max-width: 600px) {

    .back-to-top-link {
        right: 14px;
        bottom: 14px;

        width: 44px;
        height: 44px;
    }
}
/* =========================================================
   GLOBALER MAKERSPACE-HINTERGRUND
   ========================================================= */

body.site {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.20),
            rgba(255, 255, 255, 0.20)
        ),
        url("/images/background/makerspace-background.png");

    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


/* Hauptbereich leicht transparent */
.site-grid {
    background: rgba(255, 255, 255, 0.75);
}


/* Inhalte selbst transparent lassen */
main {
    background: transparent;
}
/* =========================================================
   HINTERGRUND – MOBILE
   ========================================================= */

@media (max-width: 900px) {

    body.site {
        background-attachment: scroll;
        background-position: center top;
    }

    .site-grid {
        background: rgba(255, 255, 255, 0.80);
    }
}
/* Preis in der Produktübersicht mittig */
#ph-pc-category-box .ph-category-price-box {
    width: 100% !important;
    text-align: center !important;
}

#ph-pc-category-box .ph-category-price-box .ph-price-brutto {
    float: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}
/* Buttons in der Artikelübersicht zentrieren */
.ph-category-action-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 25px !important;
    flex-wrap: wrap;
}

/* Phoca-Cart-Ausrichtung der einzelnen Buttons aufheben */
.ph-category-action-buttons .ph-button-view-product-box,
.ph-category-action-buttons .ph-button-choose-variant-box,
.ph-category-action-buttons .ph-button-add-to-cart-box {
    float: none !important;
    margin: 0 !important;
}
/* Kategorie-Karten im Shop */
#ph-pc-categories-box .ph-row-cats {
    justify-content: center;
}

#ph-pc-categories-box .ph-item-box {
    text-align: center;
}

#ph-pc-categories-box .ph-cat-desc {
    max-width: 320px;
    margin: 12px auto 18px auto;
    line-height: 1.5;
}

#ph-pc-categories-box .ph-item-action-box {
    text-align: center;
}
/* =========================================================
   PHOCA CART – SHOP KATEGORIEN
   ========================================================= */

/* Gesamten Kategorienbereich etwas kompakter */
#ph-pc-categories-box .ph-row-cats {
    justify-content: center;
    gap: 60px;
}

/* Einzelne Kategorie */
#ph-pc-categories-box .row-item {
    max-width: 400px;
    flex: 0 0 400px;
}

/* Kategorie-Inhalt */
#ph-pc-categories-box .ph-item-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Kategorie-Bilder */
#ph-pc-categories-box .ph-item-content > a {
    display: block;
    text-align: center;
}

#ph-pc-categories-box .ph-item-content img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    display: block;
    margin: 0 auto 0 auto;
}

/* Überschrift */
#ph-pc-categories-box .ph-item-content h2,
#ph-pc-categories-box .ph-item-content h3,
#ph-pc-categories-box .ph-item-content h4 {
    margin-top: 4px;
    margin-bottom: 8px;
}

/* Beschreibung */
#ph-pc-categories-box .ph-cat-desc {
    line-height: 1.5;
    margin-bottom: 18px;
    flex-grow: 1;
}

/* Button-Bereich */
#ph-pc-categories-box .ph-item-action-box {
    text-align: center;
    margin-top: auto;
}

/* Entdecken-Button */
#ph-pc-categories-box .ph-item-action-box .ph-btn {
    float: none !important;
    display: inline-block;
}
/* Kategorien etwas näher zusammen */
#ph-pc-categories-box .ph-row-cats {
    justify-content: center;
    gap: 25px;
}

/* Beschreibung linksbündig */
#ph-pc-categories-box .ph-cat-desc {
    line-height: 1.5;
    margin: 12px auto 18px auto;
    flex-grow: 1;
    text-align: left;
    max-width: 340px;
}

/* Überschrift weiterhin mittig */
#ph-pc-categories-box .ph-item-content h2,
#ph-pc-categories-box .ph-item-content h3,
#ph-pc-categories-box .ph-item-content h4 {
    text-align: center;
}

/* Button weiterhin mittig */
#ph-pc-categories-box .ph-item-action-box {
    text-align: center;
    margin-top: auto;
}
/* Shop-Kategorien – Beschreibung zentrieren */
#ph-pc-categories-box .ph-cat-desc {
    text-align: center !important;
    max-width: 360px;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Shop-Kategorien – Abstand zum Entdecken-Button verkleinern */
#ph-pc-categories-box .ph-cat-desc {
    margin-bottom: 15px !important;
}

#ph-pc-categories-box .ph-item-action-box {
    margin-top: 0 !important;
}
/* Shop-Kategorien – Abstand zwischen Bild und Überschrift */
#ph-pc-categories-box .ph-category-header {
    margin-top: 10px !important;
}
/* Phoca Cart Branding ausblenden */
div:has(> a[href*="phoca.cz/phocacart"]) {
    display: none !important;
}
/* Kompakter Warenkorb */
.bfl-mini-cart {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.bfl-mini-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 42px;
    text-decoration: none;
    color: #222;
    font-size: 22px;
}

.bfl-mini-cart-link:hover {
    text-decoration: none;
}

.bfl-mini-cart-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #555;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: 700;
}
/* Warenkorb-Modul im Main-Top kompakt darstellen */
.container-main-top,
.container-main-top .moduletable,
.container-main-top .card,
.container-main-top .card-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mini-Warenkorb rechts ausrichten */
.bfl-mini-cart {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: auto;
    padding: 0;
    margin: 8px 0 0 0;
}
/* =========================================================
   Mini-Warenkorb: Cassiopeia Modulbox entfernen
   ========================================================= */

.container-component > .main-top.card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.container-component > .main-top.card > .card-body {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Modul nur auf die tatsächlich benötigte Höhe reduzieren */
.container-component > .main-top.card {
    min-height: 0 !important;
}

/* Warenkorb rechts */
.bfl-mini-cart {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: auto !important;
    padding: 0 !important;
    margin: 8px 0 0 !important;
}
/* =========================================================
   Mini-Warenkorb – Button hervorheben
   ========================================================= */

.bfl-mini-cart .bfl-mini-cart-link {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    background: rgba(255, 255, 255, 0.90);
    border: 2px solid #555;
    border-radius: 8px;

    text-decoration: none !important;
    box-sizing: border-box;
}

/* Warenkorb-Symbol größer */
.bfl-mini-cart .bfl-mini-cart-link i,
.bfl-mini-cart .bfl-mini-cart-link svg {
    font-size: 26px !important;
    width: 26px;
    height: 26px;
}

/* Zahl oben rechts */
.bfl-mini-cart .bfl-mini-cart-count {
    position: absolute;
    top: -8px;
    right: -8px;

    min-width: 22px;
    height: 22px;
    padding: 0 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    font-size: 13px;
    font-weight: bold;
}
/* =========================================================
   Warenkorb – Weiter einkaufen
   ========================================================= */

.bfl-continue-shopping {
    margin-top: 18px;
    margin-bottom: 18px;
    text-align: left;
}

.bfl-continue-shopping-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 16px;

    background: rgba(255, 255, 255, 0.9);
    color: #222 !important;

    border: 1px solid #b8b8b8;
    border-radius: 5px;

    font-size: 16px;
    font-weight: 500;
    text-decoration: none !important;
}

.bfl-continue-shopping-btn:hover {
    background: #fff;
    border-color: #777;
    color: #000 !important;
}
.bfl-continue-shopping-top {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}
/* Weiter einkaufen auf Höhe des Warenkorbsymbols */
.bfl-continue-shopping-top {
    position: relative;
    top: -85px;
    margin-bottom: -65px !important;
    z-index: 10;
}
/* Phoca Cart Meldung – gleiche Höhe wie "Weiter einkaufen" */
body.com_phocacart #system-message-container {
    position: absolute !important;

    /* gleiche Höhe wie Weiter einkaufen */
    top: 205px !important;

    /* weit genug links vom Warenkorb */
    right: 420px !important;

    width: 320px !important;
    max-width: 320px !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 100 !important;
}

body.com_phocacart #system-message-container .alert {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}
/* =========================================================
   SENSORFIDGET – "Alle Sensorfidgets"
   ========================================================= */

.bfl-sensor-all-box {
    width: 100%;
    margin: 0 0 18px 0;
    padding: 16px 14px;

    border: 1px solid #ced4da;
    border-radius: 4px;

    background: rgba(255,255,255,0.22);
    box-sizing: border-box;
}

.bfl-sensor-all-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;
    font-weight: 600;
    cursor: pointer;
}

.bfl-sensor-all-label input {
    margin: 0;
}

/* Struktur bei aktiviertem Komplettset optisch deaktivieren */
.bfl-sensor-structure-disabled {
    opacity: 0.45;
}
/* =========================================================
   STARTSEITE – BILDER DER DREI HAUPTKACHELN
   ========================================================= */

.home-page .brainflush-card {
    overflow: hidden;
}

/* Bildbereich */
.home-page .brainflush-card-image {
    width: 100%;
    height: 145px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Digitale Fertigung */
.home-page .image-digital {
    background-image:
        url('/images/startseite-bilder/brainflush-digitale-fertigung.webp');
}

/* Elektronik & Technik */
.home-page .image-elektronik {
    background-image:
        url('/images/startseite-bilder/brainflush-elektronik-technik.webp');
}

/* Werkstatt & Handwerk */
.home-page .image-werkstatt {
    background-image:
        url('/images/startseite-bilder/brainflush-werkstatt-handwerk.webp');
}

/* Smartphone */
@media (max-width: 767px) {

    .home-page .brainflush-card-image {
        height: 190px;
    }

}
/* =========================================================
   STARTSEITE – KACHELBILDER
   ========================================================= */

.home-page .brainflush-card {
    overflow: hidden;
}

.home-page .brainflush-card-image {
    width: 100%;
    height: 145px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-page .image-digital {
    background-image:
        url('/images/startseite-bilder/brainflush-digitale-fertigung.webp');
}

.home-page .image-elektronik {
    background-image:
        url('/images/startseite-bilder/brainflush-elektronik-technik.webp');
}

.home-page .image-werkstatt {
    background-image:
        url('/images/startseite-bilder/brainflush-werkstatt-handwerk.webp');
}


/* =========================================================
   KACHELN ANKLICKBAR
   ========================================================= */

.home-page .brainflush-card-trigger {
    display: block;
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    color: inherit;
    text-align: left;

    cursor: pointer;
}

.home-page .brainflush-card-trigger .brainflush-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.home-page .brainflush-card-trigger:hover .brainflush-card {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.home-page .brainflush-card-trigger.active .brainflush-card {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.home-page .brainflush-more {
    display: inline-block;

    margin-top: 8px;

    font-size: 0.88rem;
    font-weight: 600;
    opacity: 0.65;
}


/* =========================================================
   DETAILBEREICH
   ========================================================= */

.home-page .brainflush-detail-area {
    display: none;

    margin-top: 28px;
    margin-bottom: 45px;
}

.home-page .brainflush-detail-area.open {
    display: block;
}

.home-page .brainflush-detail {
    display: none;

    overflow: hidden;

    border-radius: 8px;
    background: #ffffff;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);
}

.home-page .brainflush-detail.active {
    display: grid;

    grid-template-columns: 1.25fr 1fr;
}

.home-page .brainflush-detail-image {
    min-height: 330px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-page .detail-digital {
    background-image:
        url('/images/startseite-bilder/detail-digitale-fertigung.webp');
}

.home-page .detail-elektronik {
    background-image:
        url('/images/startseite-bilder/detail-elektronik-technik.webp');
}

.home-page .detail-werkstatt {
    background-image:
        url('/images/startseite-bilder/detail-werkstatt-handwerk.webp');
}

.home-page .brainflush-detail-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 36px 40px;
}

.home-page .brainflush-detail-content h3 {
    margin-top: 0;
    margin-bottom: 16px;
}

.home-page .brainflush-detail-content p {
    margin: 0;

    line-height: 1.65;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .home-page .brainflush-card-image {
        height: 190px;
    }

    .home-page .brainflush-card-trigger:hover .brainflush-card {
        transform: none;
    }

    .home-page .brainflush-detail.active {
        display: block;
    }

    .home-page .brainflush-detail-image {
        min-height: 230px;
    }

    .home-page .brainflush-detail-content {
        padding: 25px 22px;
    }

}
/* =========================================================
   HOVER-DETAILBEREICHE OHNE JAVASCRIPT
   ========================================================= */

/* Grundzustand: alle Detailbereiche ausgeblendet */
.home-page .brainflush-detail-area {
    margin-top: 28px;
    margin-bottom: 45px;
}

.home-page .brainflush-detail {
    display: none;
    overflow: hidden;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);
}

/* Wenn die jeweilige Kachel gehovert wird,
   passenden Detailbereich anzeigen */
.home-page .row.g-4:has(.brainflush-card-trigger[data-detail="digital"]:hover)
+ .brainflush-detail-area
.brainflush-detail[data-panel="digital"] {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
}

.home-page .row.g-4:has(.brainflush-card-trigger[data-detail="elektronik"]:hover)
+ .brainflush-detail-area
.brainflush-detail[data-panel="elektronik"] {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
}

.home-page .row.g-4:has(.brainflush-card-trigger[data-detail="werkstatt"]:hover)
+ .brainflush-detail-area
.brainflush-detail[data-panel="werkstatt"] {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
}

/* Detailbereich bleibt offen, solange Maus darauf ist */
.home-page .brainflush-detail:hover {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
}

/* Bildflächen */
.home-page .brainflush-detail-image {
    min-height: 330px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-page .detail-digital {
    background-image:
        url('/images/startseite-bilder/detail-digitale-fertigung.webp');
}

.home-page .detail-elektronik {
    background-image:
        url('/images/startseite-bilder/detail-elektronik-technik.webp');
}

.home-page .detail-werkstatt {
    background-image:
        url('/images/startseite-bilder/detail-werkstatt-handwerk.webp');
}

/* Text */
.home-page .brainflush-detail-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 40px;
}

.home-page .brainflush-detail-content h3 {
    margin-top: 0;
    margin-bottom: 16px;
}

.home-page .brainflush-detail-content p {
    margin: 0 0 18px 0;
    line-height: 1.65;
}

/* Mobile: keine Hover-Vorschau */
@media (max-width: 767px) {

    .home-page .brainflush-detail {
        display: none !important;
    }

}
/* =========================================================
   STARTSEITE
   BILDER DER DREI HAUPTKACHELN
   ========================================================= */

.home-page .brainflush-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.home-page .brainflush-card-link:hover,
.home-page .brainflush-card-link:focus {
    color: inherit;
    text-decoration: none;
}

.home-page .brainflush-card {
    overflow: hidden;
}

.home-page .brainflush-card-image {
    width: 100%;
    height: 145px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Digitale Fertigung */

.home-page .image-digital {
    background-image:
        url('/images/startseite-bilder/brainflush-digitale-fertigung.webp');
}


/* Elektronik & Technik */

.home-page .image-elektronik {
    background-image:
        url('/images/startseite-bilder/brainflush-elektronik-technik.webp');
}


/* Werkstatt & Handwerk */

.home-page .image-werkstatt {
    background-image:
        url('/images/startseite-bilder/brainflush-werkstatt-handwerk.webp');
}


/* =========================================================
   KACHEL HOVER
   ========================================================= */

.home-page .brainflush-card-link .brainflush-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.home-page .brainflush-card-link:hover .brainflush-card {
    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.14);
}

.home-page .brainflush-more {
    display: inline-block;

    margin-top: 8px;

    font-size: 0.88rem;
    font-weight: 600;

    opacity: 0.65;
}


/* =========================================================
   DETAILBEREICH
   ========================================================= */

.home-page .brainflush-detail-area {
    margin-top: 28px;
    margin-bottom: 0;
}


/* Standardmäßig alle Detailkarten verstecken */

.home-page .brainflush-detail {
    display: none;

    overflow: hidden;

    background: #ffffff;

    border-radius: 8px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   PASSENDES DETAIL BEIM HOVER EINBLENDEN
   ========================================================= */

/* Digitale Fertigung */

.home-page
.brainflush-card-row:has(.brainflush-card-trigger[data-detail="digital"]:hover)
+
.brainflush-detail-area
.detail-panel-digital {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 1fr);
}


/* Elektronik */

.home-page
.brainflush-card-row:has(.brainflush-card-trigger[data-detail="elektronik"]:hover)
+
.brainflush-detail-area
.detail-panel-elektronik {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 1fr);
}


/* Werkstatt */

.home-page
.brainflush-card-row:has(.brainflush-card-trigger[data-detail="werkstatt"]:hover)
+
.brainflush-detail-area
.detail-panel-werkstatt {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(0, 1fr);
}


/* =========================================================
   DETAILBILDER
   ========================================================= */

.home-page .brainflush-detail-image {
    min-height: 330px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* Digitale Fertigung */

.home-page .detail-digital {
    background-image:
        url('/images/startseite-bilder/detail-digitale-fertigung.webp');
}


/* Elektronik */

.home-page .detail-elektronik {
    background-image:
        url('/images/startseite-bilder/detail-elektronik-technik.webp');
}


/* Werkstatt */

.home-page .detail-werkstatt {
    background-image:
        url('/images/startseite-bilder/detail-werkstatt-handwerk.webp');
}


/* =========================================================
   DETAILTEXT
   ========================================================= */

.home-page .brainflush-detail-content {
    display: flex;

    flex-direction: column;
    justify-content: center;

    padding: 36px 40px;
}

.home-page .brainflush-detail-content h3 {
    margin-top: 0;
    margin-bottom: 16px;
}

.home-page .brainflush-detail-content p {
    margin: 0 0 22px 0;

    line-height: 1.65;
}


/* Detail-Link */

.home-page .brainflush-detail-button {
    display: inline-block;

    align-self: flex-start;

    padding: 10px 18px;

    background: #222222;
    color: #ffffff;

    border-radius: 4px;

    text-decoration: none;

    font-weight: 600;
}

.home-page .brainflush-detail-button:hover {
    background: #444444;
    color: #ffffff;

    text-decoration: none;
}


/* =========================================================
   SMARTPHONE / TOUCH
   ========================================================= */

@media (max-width: 767px) {

    .home-page .brainflush-card-image {
        height: 190px;
    }

    /*
     * Auf Touch-Geräten keine Hover-Detailansicht.
     * Die Kacheln funktionieren dort weiterhin als Links.
     */

    .home-page .brainflush-detail-area {
        display: none;
    }

    .home-page .brainflush-card-link:hover .brainflush-card {
        transform: none;
    }

}
/* =========================================================
   MAKERSPACE – HOVER-KARTEN
   weich ein-/ausblenden, ohne Layoutsprung
   ========================================================= */

.home-page .makerspace-features {
    overflow: visible;
}

.home-page .makerspace-feature-wrap {
    position: relative;
    overflow: visible;
}

/* ---------------------------------------------------------
   Detailkarte – Grundzustand
   --------------------------------------------------------- */

.home-page .makerspace-hover-card {
    position: absolute;

    top: calc(100% + 10px);
    left: 0;

    width: 100%;

    z-index: 50;

    overflow: hidden;

    background: #ffffff;

    border-radius: 7px;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    pointer-events: none;

    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0s linear 0.28s;
}


/* ---------------------------------------------------------
   Hover – weich einblenden
   --------------------------------------------------------- */

.home-page .makerspace-feature-wrap:hover .makerspace-hover-card {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;

    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0s;
}


/* ---------------------------------------------------------
   Bildbereich
   --------------------------------------------------------- */

.home-page .makerspace-hover-image {
    width: 100%;
    height: 180px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-color: #e9e9e9;
}


/* 3D-Druck & CAD */
.home-page .hover-3d {
    background-image:
        url('/images/startseite-bilder/hover-3d-cad.webp');
}

/* Elektronik */
.home-page .hover-elektronik {
    background-image:
        url('/images/startseite-bilder/hover-elektronik.webp');
}

/* Computer & Technik */
.home-page .hover-computer {
    background-image:
        url('/images/startseite-bilder/hover-computer-technik.webp');
}

/* Werkzeuge & Maschinen */
.home-page .hover-werkstatt {
    background-image:
        url('/images/startseite-bilder/hover-werkzeuge-maschinen.webp');
}


.home-page .makerspace-hover-image.hover-werkstatt {
    background-image: url('/images/startseite-bilder/hover-werkzeuge-maschinen.webp') !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ---------------------------------------------------------
   Textbereich
   --------------------------------------------------------- */

.home-page .makerspace-hover-text {
    padding: 16px 18px 18px 18px;
}

.home-page .makerspace-hover-text h3 {
    margin: 0 0 8px 0;

    font-size: 1.05rem;
    font-weight: 700;
}

.home-page .makerspace-hover-text p {
    margin: 0;

    font-size: 0.92rem;
    line-height: 1.55;
}


/* ---------------------------------------------------------
   Kleine Verzögerung verhindert Flackern beim Mauswechsel
   --------------------------------------------------------- */

.home-page .makerspace-feature-wrap {
    transition: z-index 0s;
}

.home-page .makerspace-feature-wrap:hover {
    z-index: 100;
}


/* =========================================================
   SMARTPHONE / TOUCH
   ========================================================= */

@media (max-width: 767px) {

    .home-page .makerspace-hover-card {
        display: none;
    }

}
/* =========================================================
   STARTSEITE – RAUM-IMPRESSION
   ========================================================= */

.home-page .makerspace-room {
    position: relative;
    min-height: 230px;
    margin-top: 38px;
    margin-bottom: 38px;

    background-image:
        linear-gradient(
            rgba(20, 24, 28, 0.28),
            rgba(20, 24, 28, 0.42)
        ),
        url('/images/startseite-bilder/makerspace-raum.webp') !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    display: flex;
    align-items: flex-end;

    overflow: hidden;
    border-left: 4px solid #e32629;
}


/* Text auf dem Bild */

.home-page .makerspace-room-content {
    padding: 24px 30px;
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
}


.home-page .makerspace-room-content h2 {
    margin: 0 0 5px 0;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
}


.home-page .makerspace-room-content p {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .home-page .makerspace-room {
        min-height: 190px;
        margin-top: 28px;
        margin-bottom: 28px;
        background-position: center center;
    }

    .home-page .makerspace-room-content {
        padding: 20px;
    }

    .home-page .makerspace-room-content h2 {
        font-size: 23px;
    }

    .home-page .makerspace-room-content p {
        font-size: 15px;
    }

}

/* =========================================================
   MAKERSPACE – FARBEN DER 4 KACHELN
   nur vorhandene linke Linie einfärben
   ========================================================= */

/* 1 – 3D-Druck & CAD */
.makerspace-feature-wrap:nth-child(1) .makerspace-feature {
    border-left-color: #e32629 !important;
}

/* 2 – Elektronik */
.makerspace-feature-wrap:nth-child(2) .makerspace-feature {
    border-left-color: #f28c28 !important;
}

/* 3 – Computer & Technik */
.makerspace-feature-wrap:nth-child(3) .makerspace-feature {
    border-left-color: #f2c230 !important;
}

/* 4 – Werkzeuge & Maschinen */
.makerspace-feature-wrap:nth-child(4) .makerspace-feature {
    border-left-color: #4b9b50 !important;
}

/* zusätzlichen Streifen aus unserer letzten Änderung abschalten */
.makerspace-feature::before {
    display: none !important;
}
/* =========================================================
   MAKERSPACE – RAUMFOTO
   ========================================================= */

.home-page .makerspace-room {
    position: relative;
    min-height: 220px !important;

    background-image: url('/images/startseite-bilder/makerspace-raum.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    display: flex;
    align-items: flex-end;

    overflow: hidden;
}

/* leichte Abdunklung für bessere Lesbarkeit */
.home-page .makerspace-room::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    pointer-events: none;
}

/* Text über dem Bild */
.home-page .makerspace-room-content {
    position: relative;
    z-index: 2;

    padding: 24px 30px;

    color: #ffffff;
}

.home-page .makerspace-room-content {
    position: relative;
    z-index: 2;

    margin: 0 0 22px 28px;
    padding: 14px 20px 15px 20px;

    width: fit-content;
    max-width: calc(100% - 56px);

    color: #ffffff;

    background: rgba(20, 24, 28, 0.78);

    border-radius: 3px;
}

.home-page .makerspace-room-content h2 {
    margin: 0 0 5px 0;

    color: #ffffff;

    font-size: 28px;
    font-weight: 700;

    text-shadow: none;
}

.home-page .makerspace-room-content p {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 400;

    text-shadow: none;
}

/* Smartphone */
@media (max-width: 767px) {

    .home-page .makerspace-room {
        min-height: 180px !important;
    }

    .home-page .makerspace-room-content {
        padding: 18px 20px;
    }

    .home-page .makerspace-room-content h2 {
        font-size: 23px;
    }

    .home-page .makerspace-room-content p {
        font-size: 15px;
    }
}
/* =========================================================
   STARTSEITE – HOVER DER 3 OBEREN KACHELN
   ========================================================= */

.home-page .brainflush-top-row {
    overflow: visible;
}

.home-page .top-feature-wrap {
    position: relative;
    height: 100%;
    overflow: visible;
}


/* ---------------------------------------------------------
   HOVER-KARTE – zunächst unsichtbar
   --------------------------------------------------------- */

.home-page .top-hover-card {
    position: absolute;

    top: calc(100% + 10px);
    left: 0;

    width: 100%;

    z-index: 200;

    overflow: hidden;

    background: #ffffff;

    border-radius: 7px;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-8px);

    pointer-events: none;

    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0s linear 0.28s;
}


/* ---------------------------------------------------------
   Beim Hover weich einblenden
   --------------------------------------------------------- */

.home-page .top-feature-wrap:hover .top-hover-card {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;

    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0s;
}


/* Kachel selbst leicht anheben */

.home-page .top-feature-wrap .brainflush-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.home-page .top-feature-wrap:hover .brainflush-card {
    transform: translateY(-3px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   BILDER
   ========================================================= */

.home-page .top-hover-image {
    width: 100%;
    height: 180px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    background-color: #eeeeee;
}


/* Digitale Fertigung */

.home-page .top-hover-digital {
    background-image:
        url('/images/startseite-bilder/hover-digitale-fertigung.webp');
}


/* Elektronik & Technik */

.home-page .top-hover-elektronik {
    background-image:
        url('/images/startseite-bilder/hover-elektronik-technik.webp');
}


/* Werkstatt & Handwerk */

.home-page .top-hover-werkstatt {
    background-image:
        url('/images/startseite-bilder/hover-werkstatt-handwerk.webp');
}


/* =========================================================
   TEXT
   ========================================================= */

.home-page .top-hover-text {
    padding: 16px 18px 18px 18px;
}

.home-page .top-hover-text h3 {
    margin: 0 0 8px 0;

    font-size: 1.05rem;
    font-weight: 700;
}

.home-page .top-hover-text p {
    margin: 0;

    font-size: 0.92rem;
    line-height: 1.55;
}


/* =========================================================
   SMARTPHONE / TOUCH
   ========================================================= */

@media (max-width: 767px) {

    .home-page .top-hover-card {
        display: none;
    }

    .home-page .top-feature-wrap:hover .brainflush-card {
        transform: none;
    }

}

/* =========================================================
   MAKERSPACE – 3D-DRUCK & CAD – FINALE BILDKACHELN
   Bilder ausschließlich über CSS
   ========================================================= */


/* ---------------------------------------------------------
   2 x 2 Raster
   --------------------------------------------------------- */

.makerspace-page .makerspace-3d-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}


/* ---------------------------------------------------------
   Grundaufbau der vier Karten
   --------------------------------------------------------- */

.makerspace-page .makerspace-3d-card {
    position: relative;
    min-height: 265px;

    /* Platz für den Bildbereich */
    padding: 18px 18px 145px 18px;

    overflow: hidden;
    background: #ffffff;
    border-radius: 3px;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.09);

    isolation: isolate;

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}


/* ---------------------------------------------------------
   Überschrift
   --------------------------------------------------------- */

.makerspace-page .makerspace-3d-card > strong {
    position: relative;
    z-index: 4;

    display: block;
    margin-bottom: 12px;

    font-size: 1rem;
    font-weight: 700;
}


/* ---------------------------------------------------------
   Fließtext – zusätzlicher Abstand zum Bild
   --------------------------------------------------------- */

.makerspace-page .makerspace-3d-card .makerspace-detail-text {
    position: relative;
    z-index: 4;

    margin-top: 0;
    margin-bottom: 22px;

    line-height: 1.55;
}


/* ---------------------------------------------------------
   Listen – zusätzlicher Abstand zum Bild
   --------------------------------------------------------- */

.makerspace-page .makerspace-3d-card .makerspace-equipment-list {
    position: relative;
    z-index: 4;

    margin-top: 10px;
    margin-bottom: 24px;
    padding-left: 22px;
}

.makerspace-page .makerspace-3d-card .makerspace-equipment-list li {
    margin-bottom: 4px;
}


/* =========================================================
   BILDFLÄCHE
   Das Bild selbst wird über ::after erzeugt.
   ========================================================= */

.makerspace-page .makerspace-3d-card::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 14px;

    height: 140px;

    z-index: 1;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    /*
       Echte Transparenzmaske:
       Das Bild selbst löst sich nach oben auf.
    */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.05) 8%,
        rgba(0, 0, 0, 0.15) 16%,
        rgba(0, 0, 0, 0.32) 25%,
        rgba(0, 0, 0, 0.52) 36%,
        rgba(0, 0, 0, 0.72) 48%,
        rgba(0, 0, 0, 0.88) 62%,
        #000000 78%,
        #000000 100%
    );

    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.05) 8%,
        rgba(0, 0, 0, 0.15) 16%,
        rgba(0, 0, 0, 0.32) 25%,
        rgba(0, 0, 0, 0.52) 36%,
        rgba(0, 0, 0, 0.72) 48%,
        rgba(0, 0, 0, 0.88) 62%,
        #000000 78%,
        #000000 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    transform: scale(1);

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}


/* =========================================================
   DIE VIER BILDER
   ========================================================= */

.makerspace-page .makerspace-card-cad::after {
    background-image:
        url('/images/makerspace/makerspace-cad.webp');

    background-position: center 48%;
}

.makerspace-page .makerspace-card-fdm::after {
    background-image:
        url('/images/makerspace/makerspace-fdm.webp');

    background-position: center 50%;
}

.makerspace-page .makerspace-card-sla::after {
    background-image:
        url('/images/makerspace/makerspace-sla.webp');

    background-position: center 52%;
}

.makerspace-page .makerspace-card-slicing::after {
    background-image:
        url('/images/makerspace/makerspace-slicing.webp');

    background-position: center 48%;
}


/* =========================================================
   ELEKTRONIK – BILDZUWEISUNGEN
   Nutzt exakt dieselbe Karten-, Masken- und Hover-Routine
   wie 3D-Druck & CAD.
   ========================================================= */

.makerspace-page .makerspace-card-elektronik-labor::after {
    background-image:
        url('/images/makerspace/makerspace-elektronik-labor.webp');

    background-position: center 50%;
}

.makerspace-page .makerspace-card-elektronik-loeten::after {
    background-image:
        url('/images/makerspace/makerspace-elektronik-loeten.webp');

    background-position: center 50%;
}

.makerspace-page .makerspace-card-elektronik-mikrocontroller::after {
    background-image:
        url('/images/makerspace/makerspace-elektronik-mikrocontroller.webp');

    background-position: center 50%;
}

.makerspace-page .makerspace-card-elektronik-knowhow::after {
    background-image:
        url('/images/makerspace/makerspace-elektronik-knowhow.webp');

    background-position: center 50%;
}


/* =========================================================
   COMPUTER & TECHNIK – BILDZUWEISUNGEN
   Nutzt exakt dieselbe Karten-, Masken- und Hover-Routine
   wie 3D-Druck & CAD und Elektronik.
   ========================================================= */

.makerspace-page .makerspace-card-computer-arbeitsplaetze::after {
    background-image:
        url('/images/makerspace/makerspace-computer-arbeitsplaetze.webp');

    background-position: center 50%;
}

.makerspace-page .makerspace-card-computer-cad::after {
    background-image:
        url('/images/makerspace/makerspace-computer-cad.webp');

    background-position: center 50%;
}

.makerspace-page .makerspace-card-computer-grafik::after {
    background-image:
        url('/images/makerspace/makerspace-computer-grafik.webp');

    background-position: center 50%;
}

.makerspace-page .makerspace-card-computer-praesentation::after {
    background-image:
        url('/images/makerspace/makerspace-computer-praesentation.webp');

    background-position: center 50%;
}




/* =========================================================
   WERKZEUGE & MASCHINEN – BILDZUWEISUNGEN
   Nutzt exakt dieselbe Karten-, Masken- und Hover-Routine
   wie 3D-Druck & CAD, Elektronik und Computer & Technik.
   ========================================================= */

.makerspace-page .makerspace-card-werkzeuge-cnc::after {
    background-image:
        url('/images/makerspace/makerspace-werkzeuge-cnc.webp');

    background-position: center 50%;
}

.makerspace-page .makerspace-card-werkzeuge-drehbank::after {
    background-image:
        url('/images/makerspace/makerspace-werkzeuge-drehbank.webp');

    background-position: center 50%;
}

.makerspace-page .makerspace-card-werkzeuge-laser::after {
    background-image:
        url('/images/makerspace/makerspace-werkzeuge-laser.webp');

    background-position: center 50%;
}

.makerspace-page .makerspace-card-werkzeuge-messtechnik::after {
    background-image:
        url('/images/makerspace/makerspace-werkzeuge-messtechnik.webp');

    background-position: center 50%;
}


/* =========================================================
   HOVER
   Beim Hover wird die Transparenzmaske vollständig entfernt.
   Dadurch ist das komplette Bild sichtbar.
   ========================================================= */

.makerspace-page .makerspace-3d-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.13);
}

.makerspace-page .makerspace-3d-card:hover::after {
    -webkit-mask-image: none;
    mask-image: none;

    transform: scale(1.025);

    filter:
        brightness(1.03)
        contrast(1.01);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .makerspace-page .makerspace-3d-grid {
        grid-template-columns: 1fr;
    }

    .makerspace-page .makerspace-3d-card {
        min-height: 300px;
        padding-bottom: 170px;
    }

    .makerspace-page .makerspace-3d-card::after {
        height: 165px;
    }
}


/* =========================================================
   SMARTPHONE / TOUCH
   Auf Touch-Geräten bleibt die normale Maskendarstellung.
   ========================================================= */

@media (max-width: 600px) {

    .makerspace-page .makerspace-3d-card {
        min-height: 290px;

        padding:
            17px
            16px
            165px
            16px;
    }

    .makerspace-page .makerspace-3d-card::after {
        left: 10px;
        right: 10px;
        bottom: 10px;

        height: 160px;
    }

    .makerspace-page .makerspace-3d-card:hover {
        transform: none;
    }

    .makerspace-page .makerspace-3d-card:hover::after {
        transform: none;
        filter: none;

        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.05) 8%,
            rgba(0, 0, 0, 0.15) 16%,
            rgba(0, 0, 0, 0.32) 25%,
            rgba(0, 0, 0, 0.52) 36%,
            rgba(0, 0, 0, 0.72) 48%,
            rgba(0, 0, 0, 0.88) 62%,
            #000000 78%,
            #000000 100%
        );

        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.05) 8%,
            rgba(0, 0, 0, 0.15) 16%,
            rgba(0, 0, 0, 0.32) 25%,
            rgba(0, 0, 0, 0.52) 36%,
            rgba(0, 0, 0, 0.72) 48%,
            rgba(0, 0, 0, 0.88) 62%,
            #000000 78%,
            #000000 100%
        );
    }
}



/* =========================================================
   MAKERSPACE – ABSCHLUSSBEREICH / MITGLIED WERDEN
   ========================================================= */

.makerspace-page .makerspace-cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.makerspace-page .makerspace-cta-split .makerspace-cta-column {
    padding: 30px 40px 32px;
}

.makerspace-page .makerspace-cta-split .makerspace-cta-column + .makerspace-cta-column {
    border-left: 1px solid rgba(0, 0, 0, 0.12);
}

.makerspace-page .makerspace-cta-split .makerspace-cta-column h2 {
    margin-top: 0;
}

.makerspace-page .makerspace-cta-split .makerspace-cta-column p {
    margin-bottom: 12px;
}

.makerspace-page .makerspace-cta-split .makerspace-button {
    display: inline-block;
    margin-top: 18px;
}

.makerspace-page .makerspace-cta-membership {
    position: relative;
}

.makerspace-page .makerspace-cta-membership::before {
    content: "";
    position: absolute;
    left: 0;
    top: 30px;
    bottom: 30px;
    width: 3px;
    background: #e52329;
}

/* Tablet */
@media (max-width: 900px) {
    .makerspace-page .makerspace-cta-split {
        grid-template-columns: 1fr;
    }

    .makerspace-page .makerspace-cta-split .makerspace-cta-column + .makerspace-cta-column {
        border-left: 0;
        border-top: 1px solid rgba(0, 0, 0, 0.12);
    }

    .makerspace-page .makerspace-cta-membership::before {
        left: 30px;
        right: 30px;
        top: 0;
        bottom: auto;
        width: auto;
        height: 3px;
    }
}

/* Smartphone */
@media (max-width: 600px) {
    .makerspace-page .makerspace-cta-split .makerspace-cta-column {
        padding: 24px 20px 26px;
    }

    .makerspace-page .makerspace-cta-membership::before {
        left: 20px;
        right: 20px;
    }

    .makerspace-page .makerspace-cta-split .makerspace-button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}
/* =========================================================
   STARTSEITE – HINWEIS MITGLIEDSCHAFT
   ========================================================= */

.home-page .home-cta-membership {
    margin-top: 18px;
    padding-top: 16px;

    border-top: 1px solid rgba(0, 0, 0, 0.14);

    font-size: 0.98rem;
}

.home-page .home-cta-membership strong {
    font-weight: 700;
}


/* =========================================================
   STARTSEITE – MITMACHEN / MITGLIED WERDEN – FINAL
   Nur eine rote Linie ganz außen links.
   Kompakte Darstellung und einheitliche Buttons.
   ========================================================= */

.home-page .home-cta {
    position: relative;

    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.5fr);
    gap: 30px;

    margin-top: 34px;
    padding: 24px 36px;

    background: #f5f5f5;

    /* einzige rote Linie */
    border-left: 4px solid #d62828 !important;
}

/* Der innere Inhaltsbereich bekommt KEINE eigene senkrechte Linie */
.home-page .home-cta > *,
.home-page .home-cta-text,
.home-page .home-cta-actions,
.home-page .home-cta-membership {
    border-left: 0 !important;
}

/* Eventuelle alte Pseudoelemente innerhalb des CTA sicher abschalten.
   Das Pseudoelement des äußeren .home-cta wird ebenfalls nicht verwendet. */
.home-page .home-cta::before,
.home-page .home-cta::after,
.home-page .home-cta > *::before,
.home-page .home-cta > *::after,
.home-page .home-cta-text::before,
.home-page .home-cta-text::after,
.home-page .home-cta-actions::before,
.home-page .home-cta-actions::after,
.home-page .home-cta-membership::before,
.home-page .home-cta-membership::after {
    content: none !important;
    display: none !important;
}

.home-page .home-cta-text {
    max-width: 800px;
}

.home-page .home-cta h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

.home-page .home-cta p {
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.5;
}

.home-page .home-cta-membership {
    margin-top: 11px;
    padding-top: 10px;

    border-top: 1px solid rgba(0, 0, 0, 0.14);
    font-size: 0.96rem;
}

.home-page .home-cta-membership strong {
    font-weight: 700;
}

.home-page .home-cta-actions {
    width: 100%;
    max-width: 280px;
    justify-self: end;

    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* Alle drei Buttons im Normalzustand einheitlich anthrazit */
.home-page .home-cta .home-button,
.home-page .home-cta .home-button-dark,
.home-page .home-cta .home-button-red,
.home-page .home-cta .home-button-membership {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 43px;
    box-sizing: border-box;

    padding: 8px 16px;

    background: #20252b !important;
    color: #ffffff !important;

    border-radius: 3px;

    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
}

/* Hover: jeweils rot */
.home-page .home-cta .home-button:hover,
.home-page .home-cta .home-button-dark:hover,
.home-page .home-cta .home-button-red:hover,
.home-page .home-cta .home-button-membership:hover {
    background: #d62828 !important;
    color: #ffffff !important;
    text-decoration: none !important;

    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

.home-page .home-cta .home-button:focus-visible {
    outline: 2px solid #d62828;
    outline-offset: 3px;
}

/* Tablet */
@media (max-width: 900px) {

    .home-page .home-cta {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 26px;
    }

    .home-page .home-cta-actions {
        max-width: 100%;
        justify-self: stretch;
        flex-direction: column;
    }

    .home-page .home-button {
        width: 100%;
    }
}

/* Smartphone */
@media (max-width: 600px) {

    .home-page .home-cta {
        grid-template-columns: 1fr;
        gap: 14px;

        margin-top: 24px;
        padding: 18px 14px;
    }

    .home-page .home-cta h2 {
        margin-bottom: 10px;
        line-height: 1.18;
    }

    .home-page .home-cta p {
        line-height: 1.5;
    }

    .home-page .home-cta-membership {
        margin-top: 9px;
        padding-top: 9px;
    }

    .home-page .home-cta-actions {
        width: 100%;
        max-width: none;

        flex-direction: column;
        gap: 8px;
    }

    .home-page .home-button {
        width: 100%;
        min-height: 42px;
        padding: 8px 13px;
    }
}