@charset "UTF-8";
/* CSS Document */

/* Modal-Hintergrund */
#project-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100dvw;
  height: 100dvh;
  background: rgba(16, 41, 50, 0.9);
  color: #000;
  z-index: 9999;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /*padding: 2rem 2rem 5rem;*/
  animation: fadeIn 0.3s ease-in-out;
}

/* Modal-Inhalt */
#modalContent {
  position: relative;
  width: 80dvw;
  height: auto;
  margin: 2rem auto;
  background: #ccc;
  padding: 2rem;
  border-radius: 8px;
}

/* Typografie */
#modalContent h2
{
  font-weight: 400;
	line-height: 1.2;
}
#modalContent p {
	font-size: 1.1rem;
	font-weight: 200;
	text-align: left;
	
		   
	 -webkit-hyphens: auto;
     -webkit-hyphenate-limit-before: 4;
     -webkit-hyphenate-limit-after: 4;
     -webkit-hyphenate-limit-chars: 8 4 4;
     -webkit-hyphenate-limit-lines: 2;
     -webkit-hyphenate-limit-last: always;
     -webkit-hyphenate-limit-zone: 1%;
		   
     -moz-hyphens: auto;
     -moz-hyphenate-limit-chars: 8 4 4;
     -moz-hyphenate-limit-lines: 2;
     -moz-hyphenate-limit-last: always;
     -moz-hyphenate-limit-zone: 1%;
		   
     -ms-hyphens: auto;
     -ms-hyphenate-limit-chars: 8 4 4;
     -ms-hyphenate-limit-lines: 2;
     -ms-hyphenate-limit-last: always;
     -ms-hyphenate-limit-zone: 1%;
		   
     hyphens: auto;
     hyphenate-limit-chars: 8 4 4;
     hyphenate-limit-lines: 2;
     hyphenate-limit-last: always;
     hyphenate-limit-zone: 1%;
}

/* Responsive Bild */
#modalContent img {
  max-width: 100%;
  width: 100%;
  height: auto;
  /*margin-top: 1rem;*/
  border-radius: 4px;
}

/* Schließen-Button */
.modal-close {
    position: absolute; 
    top: 1rem;  
    right: 1.5rem; 
    background: none; 
    border: none;
    color: #000; 
    font-size: 1.5rem; 
    font-weight: 300; 
    cursor: pointer;
    z-index: 10;
    padding: 0; 
    line-height: 1; 
    
}

.modal-close:hover {
    transform: scale(1.2);
}

.hidden {
  display: none !important;
}

/* Fade-In Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Grid + Element-Zurodnung (Mobile First) */

/* Der Grid-Container, der alle vier Elemente hält */
.project-seo-content {
    display: grid;
    gap: 2rem; /* Abstand Grid-Zellen */
    
    grid-template-columns: 1fr;
    grid-template-areas: 
        "header"
		"image"
        "facts"
        "description";
}

/* Zuordnung JS-Container Grid Areas */
.modal-header-column { grid-area: header; }
.modal-keyfacts-column { grid-area: facts; }
.modal-image-column { grid-area: image; 
margin: 0;}
.modal-description-full { grid-area: description; }


.keyfacts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.5;
    margin-top: 0;
}

.keyfacts-list li {
    margin-bottom: 0.2rem;
}


.keyfacts-list li .fact-label {
    font-weight: 500;
color: #333;
display: block; 
    margin-bottom: 0.5rem;
}

.keyfacts-list li .fact-value {
     font-weight: 200;
color: #000;
display: block; 
}

.nested-fact-list {
  
    margin: 0; 
    padding-left: 1.2rem; 
    
    list-style-type: disc; 
margin-top: -0.2rem;
}

.nested-fact-list li {
    margin-bottom: 0.2rem;
    font-weight: 200;
}




/* Desktop Layout (ab 992px) -- */

  @media (min-width: 992px) {
    
    /* Das NEUE STANDARD-LAYOUT: Titel oben, Fakten links/rechts, Bild unten */
    .base-layout {
        display: grid;
        grid-template-columns: 2fr 3fr;
        grid-template-rows: auto auto auto 1fr;
        grid-gap: 1rem 1rem; 

        grid-template-areas:
            "header header" 
            "image image" 
			"facts-left facts-right" 
			"description description"; 
    }

    .keyfacts-list li .fact-label {
        display: inline-block; 
        min-width: 150px; 
        margin-bottom: 0; 
line-height: 1.5rem;
    }
	  .modal-facts-right .keyfacts-list li .fact-label {
    min-width: 180px !important;
}

    .keyfacts-list li .fact-value {
        display: inline-block;
		flex-wrap: wrap;
    }


    .nested-fact-list {
        display: inline-block;
        margin-top: 0;
        padding-left: 20px;
        vertical-align: top; 
    }

    .base-layout .modal-header-column {
        grid-area: header;
        margin-bottom: 0.5rem;
    }
    
    .base-layout .modal-description-full {
        grid-area: description;
       
    }
    
    .base-layout .modal-image-column {
        grid-area: image;
        align-self: end;
    }


    .modal-header-column h2 { margin-bottom: 0; }
    .modal-header-column h3 { margin-bottom: 0; }

	  #modalContent h2
{
  font-weight: 400;
	line-height: 1.5;
}
#modalContent {
	hyphens: manual;
}

#modalContent p {

	text-align: justify;
}

}