/*-----------------------------------------
* start_style.css - MASTERDATEI

* 1.   Variablen
* 2.   Schriften
* 3.   Basis
* 3.1  Basisformatierung
* 3.2  Navigation
* 4.   Formulare
* 5.   Media Queries
* 5.1  Media Query medium > 768px / 48rem
* 5.2  Media Query large > 992px / 62rem
* 5.3  Media Query x-large > 1200px / 75rem
* 5.4  Media Query Print
-------------------------------------------*/

/*@import url("variables.css");*/
/* @import url("all.min.css"); */
@import url("fonts.css");
@import url("lightbox.css");
@import url("burger_menu.css");
@import url("responsive.css");
/*@import "basics.css";*/


/*--------------------
   BASIS-ELEMENTE
---------------------*/


body {
    margin: 0; /* Entfernt Standardabstände des Body */
    padding: 0; /* Entfernt zusätzliches Padding */  
    background-color:blueviolet;
}

div {
    margin-right: 40px;
    display: flex;
}

#meine_ziele_kasten,
  #mindset_kasten,
  #skills_kasten {
    margin-right:0;
  }






/* 1. Die globale div-Regel für den Bereich #über_mich_kasten gezielt neutralisieren */
#über_mich_kasten > div {
    margin-right: 0 !important;
    display: flex !important;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 220px;
    box-sizing: border-box;
}

/* 2. Bildspalte fixieren */
#foto_spalte {
    flex: 0 0 300px !important;
    max-width: 320px;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin-right: 0 !important;
    min-width: 200px;
}

/* 3. Kasten-Layout */
#über_mich_kasten {
    display: flex !important;
    flex-direction: row;
    align-items: stretch !important;
    gap: 2rem;
    margin-right: 0;
    padding: 2rem 2rem;
    background: rgb(240, 234, 181);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* 4. E-Mail-Links umbrechen */
#über_mich_kasten a {
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* 5. Optional: Abstand der Absätze im Kasten */
#über_mich_kasten p {
    margin: 0 0 1rem 0;
    padding: 0;
    background: none;
}

hr {
    margin: 0;
    padding: 0;
    border: none;
    border-top: 2px dashed #333;
    background-color:rgb(240, 234, 181);
}

ul {
    font-family: poppins_light;
    padding: 20px;
    background-color:rgb(240, 234, 181);
    margin-top: 0px;
    padding-left: 40px;
    list-style: disc;
}

#ProjekteUntereinander {
  display: block !important;
  flex-direction: unset !important;
}

#intro_me {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

h2 {
    font-family: poppins_mediumitalic;
    color:rgb(230, 233, 63) ;
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
}

#projekte {
    font-family: dutch_harley;
    font-size: 30px;
    color: #da00f9;
    text-shadow: 
        1px 1px 2px rgb(230, 233, 63), /* Schatten rechts unten */
        -1px 1px 2px rgb(230, 233, 63), /* Schatten links unten */
        1px -1px 2px rgb(230, 233, 63), /* Schatten rechts oben */
        -1px -1px 2px rgb(230, 233, 63); /* Schatten links oben */
}

p {
    font-family: poppins_light;
    padding: 20px;
    background-color:rgb(240, 234, 181);
}











/* 

ALTER CODE!!!

#über_mich_kasten {
    margin-right: 0 !important;
    padding: 0;
    display: flex !important;
    flex-direction: row; /* sorgt dafür, dass die beiden Kästen nebeneinander stehen */
    /*flex-wrap: wrap !important; /* erlaubt Umbruch, wenn der Platz nicht reicht */
    /*align-items: stretch; /* sorgt dafür, dass die Kästen gleich hoch sind */
/*}

#über_mich_kasten > #foto_spalte,
#über_mich_kasten > #column_1,
#über_mich_kasten > #div_1 {
  display: block !important;
  height: auto !important;
}

#über_mich_kasten a {
  overflow-wrap: anywhere;
  word-break: break-all;
}


#column_1, #div_1 {
    display: flex;
    margin-right: 0;
    width: 40%;
    align-items: stretch; /* sorgt dafür, dass die Kästen gleich hoch sind */
/*}

#foto_spalte {
    display:flex;
} 


#div_1 {
    display: flex;
    flex-direction: column;
    word-break:break-all;
}

#column_1 {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* sorgt dafür, dass die Kästen gleich hoch sind */  
/*}
*/